Top 40 React JS interviewspørgsmål og svar (2026)
James Hartman
Forbereder du dig til en jobsamtale i React JS? Det er tid til at udforske, hvad der venter dig. Forståelse Spørgsmål til React JS-jobsamtalen hjælper med at afdække både din konceptuelle klarhed og dine styrker i den virkelige verden inden for implementering.
React JS tilbyder enorme karrieremuligheder for professionelle med teknisk erfaring og domæneekspertise. Uanset om du er nyuddannet eller senior med 5 eller 10 års professionel erfaring, er analyse af færdigheder og teknisk ekspertise vigtig. Disse spørgsmål og svar hjælper teamledere, managers og udviklere med at forfine deres færdigheder og komme til topjobsamtaler.
Baseret på indsigt fra over 85 fagfolk, herunder ansættelseschefer og tekniske ledere, afspejler denne samling forskellige brancheforventninger og reelle interviewmønstre indsamlet fra arbejdsteams på tværs af forskellige domæner.
De bedste spørgsmål og svar til React JS-jobsamtaler
1) Forklar den virtuelle DOM og hvordan afstemning fungerer i React.
Svar:
Den virtuelle DOM er en repræsentation af brugergrænsefladen i hukommelsen, som React vedligeholder for effektivt at beregne ændringer i brugergrænsefladen. Når tilstand eller props muterer, gengiver React et nyt virtuelt DOM-træ og kører derefter en forskellig algoritme mod det forrige træ for at finde det minimale sæt af reelle DOM-operationer, der kræves. Denne proces, kaldet forsoning, minimerer layout-frafald og dyre browser-omlægninger. React tildeler nøgler til elementer i lister for at hjælpe den med at matche noder på tværs af gengivelser, og den bruger heuristikker (som sammenligning af typer og nøgler) til at beslutte, om noder skal opdateres, omarrangeres eller fjernes. Fordelene inkluderer forudsigelige opdateringer, mindre overfladeareal til fejl og bedre ydeevne i komplekse brugergrænseflader.
Eksempel:
Gengivelse af en dynamisk liste over chatbeskeder: ved hjælp af stabil key værdier (meddelelses-id'er), tilføjes kun nye meddelelser til DOM'en, mens eksisterende noder forbliver urørte, hvilket undgår unødvendige gengivelser.
👉 Gratis PDF-download: Spørgsmål og svar til React JS-jobsamtale
2) Hvad er de forskellige typer komponentlivscyklusser i React, og hvordan knytter Hooks sig til dem?
Svar:
React-komponenter gennemgår monterings-, opdaterings- og afmonteringsfaser. I klassekomponenter bruges livscyklusmetoder som f.eks. componentDidMount, shouldComponentUpdate, componentDidUpdateog componentWillUnmount styrer bivirkninger, renderingsbeslutninger og oprydning. I funktionskomponenter, Kroge tilbyde tilsvarende muligheder: useEffect håndterer effekter efter gengivelse; oprydningsfunktioner indeni useEffect kør ved afmontering eller før den næste effekt; useMemo og useCallback kontrolmemoisering; og useRef bevarer ændrbare referencer på tværs af gengivelser. Fordelene ved Hooks inkluderer sammensætningsevne, færre "dette"-bindingsproblemer og nemmere genbrug af logik gennem brugerdefinerede hooks, mens den største ulempe er behovet for at lære Hooks-regler og afhængighedsstyring.
Svar med eksempler:
- Monteringseffekt:
useEffect(() => fetchData(), []). - Oprydning ved afmontering:
useEffect(() => { start(); return stop; }, []).
3) Hvordan vælger man mellem klientside-rendering (CSR), serverside-rendering (SSR), statisk webstedsgenerering (SSG) og trinvis statisk regenerering (ISR) for en React-applikation?
Svar:
Renderingstrategien bør være drevet af krav til brugeroplevelsen, dataaktualitet, SEO-behov, infrastrukturbegrænsninger og udviklingshastighed. CSR passer til meget interaktive apps bag godkendelse, hvor SEO er sekundært. SSR leverer første paint med reelle data til offentlige sider, hvilket forbedrer Time to First Byte og SEO, men med højere serveromkostninger. SSG forudberegner sider under opbygning for fremragende hastighed og caching, når data ændres sjældent. ISR opdaterer statiske sider trinvist efter behov og tilbyder en balance mellem friskhed og ydeevne. Faktorerne omfatter cachekapacitet, personalisering, latenstid for globale målgrupper og operationel kompleksitet.
Tabel: Fordele vs. ulemper
| Tilgang | Fordele | Ulemper |
|---|---|---|
| CSR | Enkel hosting, rig interaktivitet | Langsommere første painting, svagere SEO |
| SSR | God SEO, friske data ved første indlæsning | Højere serverbelastning, kompleksitet |
| SSG | Hurtig, billig, CDN-venlig | Forældet indhold indtil genopbygning |
| ISR | Hurtig med kontrolleret friskhed | Flere bevægelige dele at håndtere |
4) Hvilken tilstandsstyringsstrategi bør anvendes: lokal tilstand, kontekst, Redux eller forespørgselsbiblioteker?
Svar:
Vælg den enkleste værktøj der håndterer problemets karakteristika. Komponent-lokal tilstand via useState or useReducer er ideel til isolerede UI-problemer. Kontekst Fungerer for mest læsevenlige, applikationsdækkende værdier (tema, lokalitet, nuværende bruger), men er ikke optimeret til højfrekvente opdateringer på tværs af store træer. Redux eller lignende event-sourcede butikker udmærker sig, når du har brug for forudsigelighed, tidsrejse-debugging, middleware og strenge ensrettede datastrømme. Datahentningsbiblioteker (for eksempel mønstre i React Query-stil) administrerer servertilstandslivscyklusser - caching, deduping, genhentningsstrategier og synkronisering – hvilket reducerer standardteksten. En pragmatisk arkitektur bruger ofte lokal tilstand + Kontekst til konfiguration + et servertilstandsbibliotek, og reserverer Redux til komplekse arbejdsgange.
Eksempel:
Et dashboard bruger React Query til API-caching, kontekst til tema og useReducer inde i komplekse widgets til lokal hændelseshåndtering.
5) Hvad er forskellen mellem useEffect og useLayoutEffect, og hvornår gælder hver af dem?
Svar:
useEffect kører efter browseren har malet, hvilket gør den velegnet til ikke-blokerende opgaver såsom datahentning, abonnementer og logføring. useLayoutEffect henretter synkront efter DOM-mutationer, men før maling, hvilket tillader justeringer af målinger og layout, der skal ske uden flimren (for eksempel læsning af elementstørrelser og synkron genanvendelse af stilarter). Ulempen ved useLayoutEffect er, at det kan blokere maling og skade responsiviteten, hvis det bruges for meget. En god regel er at starte med useEffect for bivirkninger og række ud efter useLayoutEffect kun når du skal måle eller synkront mutere layout for at sikre visuel korrekthed.
Svar med eksempler:
useEffectHent brugerprofil efter gengivelse.useLayoutEffectMål størrelsen på et værktøjstip for at placere det før maling.
Hurtig sammenligning
| Karakteristisk | useEffekt | brugLayoutEffekt |
|---|---|---|
| Timing | Efter maling | Før maling |
| Brug sag | Data, abonnementer | Målinger, synkrone layoutrettelser |
| Risiko | Mindre stød, hvis tungt | Blokerer maling, hvis den er tung |
6) Forklar hvordan nøgler fungerer i lister, og hvilke ulemper der er ved at bruge array-indekser.
Svar:
Nøgler gør det muligt for Reacts afstemning at identificere listeelementer præcist mellem gengivelser. Stabile, unikke nøgler giver React mulighed for at omarrangere, indsætte eller fjerne elementer med minimal DOM-churn. arrayindekser som nøgler er problematisk, når elementer kan omarrangeres, indsættes eller slettes, fordi React kan forbinde tidligere tilstand med det forkerte element, hvilket forårsager subtile fejl (f.eks. forkerte inputværdier eller animationer). Den bedste praksis er at bruge en uforanderlig, domænespecifik identifikator, såsom et database-ID. Hvis listen er virkelig statisk og aldrig omarrangeres, er indekser acceptable, men dette er undtagelsen snarere end reglen.
Eksempel:
Et Kanban-tavle, der kan trækkes, bør bruge kort-ID'er, ikke indekser, for at bevare komponentidentiteten under træk-og-slip.
7) Hvor anvendes memoiseringsteknikker i React, og hvad er deres fordele og ulemper?
Svar:
Memorisering reducerer unødvendige beregninger og gengivelser ved at genbruge tidligere resultater, når input ikke er ændret. I React, React.memo cache-komponent output, useMemo gemmer dyre beregninger i cache, og useCallback husker funktionsidentiteter, der gives videre til underordnede. De primære fordele er ydeevnestabilitet og reduceret CPU-forbrug under tung interaktion. Ulemper omfatter kompleksitet, potentielle stale-cache-fejl, hvis afhængigheder er forkerte, og hukommelsesoverhead.
Tabel: Forskellige måder at huske på
| Type | Formål | Typiske faktorer at overveje |
|---|---|---|
React.memo(Component) |
Spring gengivelse over, hvis rekvisitterne er overfladisk-lige | Prop-volatilitet, børneomkostninger |
useMemo(fn, deps) |
Cacheberegnede værdier | Omkostninger ved beregning vs. hukommelse |
useCallback(fn, deps) |
Stabil funktionsidentitet | Afhængighedskorrekthed |
Svar med eksempler:
Husk et filtreret, sorteret datasæt til et gitter ved hjælp af useMemo, og ombryd celle-renderer-komponenter med React.memo for at undgå gentagne storme.
8) Foretrækker du kontrollerede eller ukontrollerede komponenter til formularer? Diskuter fordele, ulemper og typer af formulartilstande.
Svar:
Kontrollerede komponenter bind input til React-tilstand via value og onChange, der muliggør validering, maskering og betinget brugergrænseflade udledt af en enkelt sandhedskilde. Fordelene er forudsigelighed og nem integration med andre tilstande; ulemperne omfatter omkostninger til gengivelse ved hvert tastetryk uden optimering. Ukontrollerede komponenter Stol på DOM som sandhedens kilde ved hjælp af referencer, hvilket giver lavere overhead og enklere ledningsføring til grundlæggende formularer, men mindre centraliseret validering. For komplekse arbejdsgange er et hybridmønster almindeligt, der bruger kontrollerede input til kritiske felter og ukontrolleret til store, teksttunge områder.
Eksempel:
En tilmeldingsformular bruger kontrollerede felter til validering af e-mail og adgangskode, mens et tekstområde til noter er ukontrolleret for at reducere gengivelsesomkostningerne.
9) Hvornår ville du bruge Context versus en brugerdefineret hook, og hvad er forskellen på dem konceptuelt?
Svar:
Kontekst er en transportmekanisme for værdier, som mange komponenter har brug for, hvilket undgår propelboring. Den styrer ikke tilstanden selv; den eksponerer den blot for efterkommere. brugerdefineret krog indkapsler genanvendelig logik – der kombinerer tilstand, effekter og eksterne tjenester – og returnerer værdier og funktioner. Brug kontekst til at levere delt, mest læsbar konfiguration eller til at eksponere et lager, og brug brugerdefinerede hooks til at implementere lagerets adfærd eller til at orkestrere bekymringer som godkendelse, funktionsflag eller datahentningspolitikker. De to er komplementære: et fælles mønster er useAuth() som en brugerdefineret krog bakket op af en AuthContext.
Svar med eksempler:
AuthProvider leverer bruger og tokens via Context; useAuth håndterer bivirkninger ved login, opdatering og logout.
10) Kan du skitsere strategier til performance tuning for store React-applikationer, herunder karakteristika for langsomme gengivelser og livscyklus-hotspots?
Svar:
Ydelsesjustering starter med måling. Identificer langsomme stier ved hjælp af React DevTools Profiler og browserens ydeevnepaneler for at finde afstemnings-hotspots og dyre commits. Taktikker inkluderer statslig lokalitet (hold staten tæt på sine forbrugere) huske (React.memo, useMemo, useCallback), listevirtualisering for lange lister, opdeling af kode med lazy loading for at reducere den indledende bundt, og afspringning eller drosling højfrekvente hændelser. For serverbaserede data, indfør caching med et forespørgselsbibliotek og udnyt spændingsvenlig mønstre for mere jævn indlæsning. Vær opmærksom på livscyklus-hotspots, såsom effekter, der kører for ofte på grund af brede afhængighedsarrays, eller komponenter, der gengives igen på grund af ofte skiftende kontekstværdier.
Svar med eksempler:
Virtualiser en tabel med 10,000 rækker ved hjælp af et vinduesbibliotek; indlæs tunge diagrammer med lav hastighed bag rutebaseret kodeopdeling for at forbedre den indledende maling.
11) Hvad er forskellen mellem props og state i React?
Svar:
Både props og state påvirke, hvordan komponenter gengives, men deres formål og livscyklus er fundamentalt forskellige. rekvisitter (forkortelse for properties) er uforanderlige input, der sendes fra en forælderkomponent til en underordnet komponent, og som definerer konfiguration eller data til gengivelse. De flyder nedad i Reacts ensrettede dataflow og bør aldrig ændres af den modtagende komponent. Tilstand, derimod, kan ændres og vedligeholdes internt af komponenten. Den bestemmer dynamisk adfærd, der ændrer sig over tid, såsom formularinputværdier eller til/fra-funktion.
Tabel over de vigtigste forskelle:
| faktor | rekvisitter | Tilstand |
|---|---|---|
| Foranderlighed | uforanderlige | Omskiftelig |
| Ejerskab | Bestået af forælder | Ejet af komponent |
| Opdateringsmetode | Forældre gengivelser | useState or setState |
| Use Case | Konfiguration | Dynamiske ændringer i brugergrænsefladen |
| Lifecycle | Eksisterer under gengivelse | Vedvarer, udløser gengivelser |
Eksempel:
A <Button color="blue" /> bruger rekvisitter til at bestemme farve, mens en clicked boolsk i sin tilstand slår visuel feedback til/fra.
12) Forklar komponentarkitekturmønsteret i React og de forskellige måder, komponenter klassificeres på.
Svar:
React-applikationer følger en komponentbaseret arkitektur, der opdeler brugergrænsefladen i små, genanvendelige byggesten. Komponenter kan kategoriseres efter deres formål og ansvar:
- Præsentationsmæssige (dumme) komponenter – Fokuser på brugergrænsefladen, modtag data via rekvisitter og administrer sjældent tilstand.
- Container (Smart) Komponenter – Håndterer logik, henter data og styrer tilstand; de gengiver præsentationskomponenter.
- Komponenter af højere orden (HOC'er) – Funktioner, der tager en komponent og returnerer en forbedret version med yderligere adfærd.
- Rene komponenter – Optimer ydeevnen ved at overfladisk sammenligne rekvisitter og tilstand.
- Funktionelle vs. klassekomponenter – Funktionelle komponenter (med hooks) foretrækkes nu af hensyn til læsbarhed og ydeevne.
Eksempel:
A <UserProfile /> komponenten kan være præsentationsmæssig, modtage brugerinformation, mens <UserProfileContainer /> henter data og styrer deres livscyklus.
13) Hvordan håndterer React fejlgrænser, og hvorfor er de vigtige?
Svar:
Fejlgrænser er specielle React-komponenter, der fanger JavaScriptfejl hvor som helst i deres underordnede komponenttræ under rendering, livscyklusmetoder eller konstruktører. De forhindrer hele appnedbrud ved at isolere fejl til specifikke undertræer. Du kan implementere en ved hjælp af componentDidCatch(error, info) og static getDerivedStateFromError() i en klassekomponent.
fordele:
- Bevar brugergrænsefladens stabilitet ved at vise alternative brugergrænseflader.
- Registrer og logfør fejl til analyser.
- Forhindr kaskaderende afmonteringer.
Eksempel:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) Hvad er React Fragments, og hvordan adskiller de sig fra wrapper elementer?
Svar:
Reagerer Fragmenter (<></>) lader dig gruppere flere elementer uden at tilføje ekstra noder til DOM'en. Dette er vigtigt for en renere struktur, især i lister, tabeller og semantisk HTML, hvor yderligere wrappers kan forårsage layout- eller tilgængelighedsproblemer. I modsætning til wrapper <div>s, Fragmenter gengives ikke til DOM'en og har derfor fordele med hensyn til ydeevne og semantik.
Eksempel:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Differencetabel:
| faktor | fragment | <div> Wrapper |
|---|---|---|
| DOM-output | Ingen | Tilføjer ekstra node |
| Use Case | Strukturel samlingping | Styling eller layout |
| Ydeevne | Bedre | Lille overhead |
15) Hvilken React Hook ville du bruge til performanceoptimering, og hvorfor?
Svar:
Ydelsesfølsomme React-komponenter er ofte afhængige af memo-kroge og doven lastning for at minimere overflødigt arbejde. Almindelige hooks inkluderer:
useMemo→ Lagrer beregningsmæssigt dyre resultater i cache.useCallback→ Forhindrer unødvendige underordnede gengivelser på grund af ændringer i funktionsidentitet.useTransition→ Udsætter ikke-hastede opdateringer for at give en mere jævn brugerflade.useDeferredValue→ Forsinker tunge beregninger indtil efter umiddelbare interaktioner.
Eksempel:
Et stort datagitter ved hjælp af useMemo For filtrerede resultater kan CPU-forbruget reduceres med 50 % eller mere.
fordele:
- Reducerer spildte gengivelser.
- Holder brugergrænsefladen responsiv under belastning.
Ulempe:
- Kræver afhængighedspræcision; der kan opstå fejl i forældet cache, hvis den administreres forkert.
16) Hvad er React-portaler, og hvad er deres fordele?
Svar:
Portaler tillade React-komponenter at gengive underordnede elementer i en DOM-node uden for deres overordnede hierarki, typisk for modaler, værktøjstip eller dropdowns, der visuelt skal "undslippe" overflow- eller stablingskontekster. Implementeret ved hjælp af ReactDOM.createPortal(child, container), de opretholder konsistens i hændelsesboblerne, så hændelseshåndterere fungerer, som om elementet forblev inden for sit oprindelige hierarki.
Fordele Tabel:
| Advantage | Beskrivelse |
|---|---|
| Strukturel uafhængighed | Render uden for overordnet træ |
| CSS/Stacking-kontrol | Undgå overflow: hidden eller z-indeksproblemer |
| Begivenhedsudbredelse | Reacts syntetiske begivenheder bobler stadig korrekt |
| Reus Evne | Ideel til globale overlays |
Eksempel:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) Forklar hvordan React Router håndterer navigation og tilstand mellem sider.
Svar:
React Router er et deklarativt routingbibliotek, der synkroniserer brugergrænsefladen med browserens URL. Det bruger historik-API at manipulere sessionshistorikken uden at genindlæse hele siden. Kernekoncepter inkluderer Ruter, Linksog Outlet til indlejret routing. Biblioteket understøtter dynamiske ruter, URL parametreog navigationskroge (useNavigate, useParams, useLocationReact Router v6 introducerede en forenklet syntaks og data-API'er til loader og Action funktioner, forbedring af SSR-integration og tilstandsstyring.
Eksempel:
<Route path="/user/:id" element={<UserProfile />} />
Fordele:
- Aktiverer navigation på én side.
- Bevarer scrollposition og historik.
- Integrerer rent med lazy loading for bedre ydeevne.
18) Hvad er de forskellige måder at håndtere bivirkninger i React-applikationer?
Svar:
Bivirkninger refererer til handlinger, der påvirker noget uden for en komponents omfang (API-kald, DOM-manipulation, abonnementer). De vigtigste værktøjer omfatter:
useEffectfor klient-sideeffekter efter render.- Hændelseshåndterere til brugerstyrede effekter.
- Brugerdefinerede kroge at genbruge effektlogik (for eksempel
useFetch). - middleware (som Redux Saga eller Thunk) til kompleks asynkron orkestrering.
- React-forespørgsel eller SWR til at administrere servertilstand og automatisk genhente livscyklusser.
Eksempel:
A useEffect henter data ved montering:
useEffect(() => { fetchData(); }, []);
fordele:
Forenklet asynkron styring, bedre indkapsling og tydeligere livscykluskontrol.
19) Er React et framework eller et bibliotek? Diskuter de faktorer, der definerer forskellen.
Svar:
React er officielt en bibliotek, ikke et fuldt udviklet rammeværk. Det fokuserer udelukkende på visningslag, der leverer rendering, tilstand og komponent-abstractioner uden at gennemtvinge routing, datahentning eller byggestruktur.
Sammenligningstabel:
| faktor | Bibliotek (React) | Framework (Angular, Vue) |
|---|---|---|
| Anvendelsesområde | Se gengivelse | Fuld MVC-arkitektur |
| påståelig | Lav | Høj |
| kontrol | Udviklerdrevet | Rammedrevet |
| Fleksibilitet | Høj | Begrænset af konventioner |
| Indlæringskurve | Moderat | Højere på grund af kompleksitet |
Reacts økosystem (Redux, Router, Query, Next.js) danner effektivt et "meta-framework", der tilbyder modulær komposibilitet, der giver udviklere mulighed for at bygge deres egen arkitektur.
20) Hvornår bør du bruge React.lazy og Suspense, og hvad er deres fordele?
Svar:
React.lazy muliggør opdeling af kode ved dynamisk kun at indlæse komponenter, når det er nødvendigt, mens Suspense giver en alternativ brugergrænseflade, indtil komponenten er klar. Denne kombination forbedrer ydeevnen ved indledende indlæsning og den brugeropfattede respons.
Eksempel:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Fordele Tabel:
| Advantage | Forklaring |
|---|---|
| Ydeevne | Indlæser kode efter behov |
| Brugererfaring | Elegant indlæsningsalternativ |
| Bundt størrelse | Mindre startpakke |
| Enkelhed | Native React API, minimal opsætning |
Bedste praksis:
- Pak flere dovne komponenter ind i én Suspense-grænse.
- Brug meningsfulde fallback-indikatorer for tilgængelighed.
21) Forklar hvad React Server Components (RSC'er) er, og deres fordele.
Svar:
React Server Components (RSC'er) er en vigtig innovation, der er introduceret for at forbedre ydeevnen og udvikleroplevelsen ved at give komponenter mulighed for at render på serveren uden at sende deres JavaScript til klientenDe udføres udelukkende på serveren, henter data, læser fra databaser eller udfører I/O-operationer sikkert, før de streamer serialiseret output til klienten.
fordele:
- Mindre bundtstørrelse — Ingen klient-JS til kun-server-logik.
- Forbedret præstationer — Hentning af data på serversiden reducerer vandfald.
- Sikkerhed — Følsom kode når aldrig browseren.
- Bedre caching — Serverkomponenter kan cachelagres ved kanten.
Eksempel:
A <ProductList /> Serverkomponenten kan hente data direkte fra en database og sende resultaterne til en <ProductCard /> klientkomponent.
22) Hvad er forskellen mellem React-hydrering og -afstemning?
Svar:
Selvom begge udtryk involverer opdatering af brugergrænsefladen i React, er deres formål forskelligt:
- Afstemning er processen med at sammenligne det virtuelle DOM-træ med dets tidligere version for at bestemme det minimale sæt af DOM-opdateringer.
- Hydration, på den anden side, er processen med at knytte Reacts eventlistenere og interne strukturer til server-renderet HTML på klientsiden, og forvandle statisk markup til en fuldt interaktiv app.
Sammenligningstabel:
| faktor | Afstemning | Hydration |
|---|---|---|
| Udløser | Klientgengivelse | Første sideindlæsning (SSR) |
| Formål | Opdater DOM effektivt | Gør SSR HTML interaktiv |
| Anvendelsesområde | Virtuel DOM-forskel | Hændelsesbinding + tilstandsgendannelse |
| Frekvens | Flere gange | Én gang efter SSR-rendering |
Eksempel:
Efter en Next.js-app sender præ-renderet HTML, React hydrater så komponenterne reagerer på hændelser uden at gengive alt igen.
23) Hvordan forbedrer samtidig rendering brugeroplevelsen i React 18+?
Svar:
Samtidig rendering giver React mulighed for at afbryde, sætte på pause eller genoptage renderingsarbejde baseret på brugerprioritet. Dette forhindrer brugergrænsefladen i at fryse under tunge beregninger eller genrenderinger. Funktioner som f.eks. useTransition og useDeferredValue udnytte denne evne til at adskille hastende opdateringer (ligesom digping) fra ikke haster dem (som filtrering).
Fordele:
- Jævne, responsive interaktioner.
- Tidsopdeling for at forhindre blokering af hovedtråden.
- Forudsigelig prioritering for bedre UX.
Eksempel:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
Her, takping forbliver flydende, selv når store datasæt filtreres, fordi React planlægger ikke-haster opdateringer samtidigt.
24) Hvad er de forskellige måder at udføre test på i React-applikationer?
Svar:
Reaktionstestning kan klassificeres i enhed, integrationog ende til ende niveauer.
Tabel med testmetoder:
| Type | Værktøj | Formål |
|---|---|---|
| Enhed | der er | Test af isolerede funktioner/komponenter |
| Integration | React Testing Library | Test UI-interaktioner og tilstandsændringer |
| E2E | Cypress / Dramatiker | Test brugerflows i rigtige browsere |
Bedste praksis:
- Foretrække React Testing Library over enzym (moderne, DOM-orienteret).
- Mock API'er ved hjælp af
msw(Simuleret servicemedarbejder). - Undgå at teste implementeringsdetaljer – fokuser på adfærd.
Eksempel:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) Hvilke byggeværktøjer og bundlere bruges mest med React, og hvad er deres forskelle?
Svar:
React kan integreres med adskillige bundlere og compilere, der hver især er optimeret til forskellige use cases.
Sammenligningstabel:
| Værktøj | Kendetegn | Fordele | Ulemper |
|---|---|---|---|
| webpack | Meget konfigurerbar | Moden, plugin-rig | Kompleks opsætning |
| Lives | ESM-baseret, lynhurtig udviklingsserver | Øjeblikkelig HMR, moderne syntaks | Begrænset understøttelse af ældre plugins |
| Grund | Nul-konfiguration | Automatisk optimering | Less fleksibel |
| esbuild | Go-baseret compiler | Ekstremt hurtigt | Færre økosystem-plugins |
Eksempel:
Moderne projekter anvender ofte Lives for udviklingshastighed og esbuild i CI/CD-pipelines for effektive produktionsbuilds.
26) Hvordan udvider Next.js Reacts muligheder?
Svar:
Next.js er en React-rammeværket leverer en velafprøvet arkitektur til routing, SSR og generering af statisk infrastruktur. Den introducerer hybride renderingsmodeller, API-ruter og edge-ready implementeringsfunktioner.
fordele:
- Indbygget SSR/SSG/ISR Support.
- App-router med React Server-komponenter.
- Billedoptimering og middleware for ydeevne og sikkerhed.
- Nemme API-ruter til serverløse funktioner.
Eksempel:
app/page.js for SSR-renderede sider; app/api/route.js for server-slutpunkter.
SammenfattendeNext.js muliggør React-apps i produktionskvalitet med minimal konfiguration.
27) Hvad er nogle almindelige faldgruber i performance i React, og hvordan kan du undgå dem?
Svar:
Almindelige faldgruber i React-ydeevnen inkluderer:
- Unødvendige gengivelser — Rettelse ved hjælp af
React.memoeller opdeling af komponenter. - Oprettelse af inline-objekter/arrays — Brug
useMemofor stabile referencer. - Store lister — Implementer vinduesstyring (
react-window,react-virtualized). - Tunge beregninger — Husk eller aflast til webarbejdere.
- Overforbrug af kontekst — Hyppige opdateringer udbredes dybt; foretrækker afledt tilstand.
Eksempel:
Hvis du består { a: 1 } indlejret i en gemt komponent, gengives den igen på hver overordnet gengivelse. Løsning ved at huske objektet.
Tabel med ydeevnetips:
| Issue | Optimeringsteknik |
|---|---|
| Gengivelser | React.memo, useCallback |
| Dyre beregninger | useMemo, Webarbejdere |
| Store datasæt | Virtualisering |
| Hyppige kontekstopdateringer | Lokaliser tilstand |
28) Forklar forskellen mellem useReducer og useState.
Svar:
Begge hooks styrer tilstand, men de adskiller sig i kompleksitet og kontrol.
useStateer ideel til simple, isolerede tilstandsovergange.useReducercentraliserer kompleks tilstandslogik i en reduktionsfunktion, ved brug afdispatchhandlinger for forudsigelige opdateringer.
Sammenligningstabel:
| faktor | useState | brug Reducer |
|---|---|---|
| Syntaks | [value, setValue] |
[state, dispatch] |
| Kompleksitet | Simpelt | Moderat til komplekst |
| Use Case | Uafhængige stater | Relaterede eller indlejrede tilstande |
| Debugging | Less ordrig | Nemmere via loggede handlinger |
| Eksempel | Formularknapper | Formularvalidering eller flertrinsformularer |
Eksempel:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) Hvordan kan man forbedre tilgængeligheden (a11y) i React-applikationer?
Svar:
Tilgængelighed sikrer, at alle brugere, inklusive brugere med handicap, kan bruge din app effektivt. React fremmer tilgængelighed gennem semantisk markup og ARIA-attributter.
Bedste praksis:
- Brug semantisk HTML (
<button>vs<div onClick>). - Styr fokus ved hjælp af
refogtabIndex. - Brug ARIA-roller til dynamiske komponenter.
- Sørg for farvekontrast og tekstalternativer til billeder.
- Udnyt værktøjer som eslint-plugin-jsx-a11y og øksekerne til revisioner.
Eksempel:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
fordele:
- Bredere målgrupperækkevidde.
- SEO-forbedring.
- Overholdelse af WCAG-standarder.
30) Kan du beskrive, hvordan kodedeling og lazy loading adskiller sig, og hvornår man skal bruge hver af dem?
Svar:
Begge teknikker optimerer bundtstørrelse og belastningsydelse, men adskiller sig i udførelsestidspunkt.
- Code opdeling opdeler store bundter i mindre bidder, der kan indlæses uafhængigt af hinanden.
- Lazy loading forsinker indlæsningen af disse klumper, indtil de er nødvendige.
Sammenligningstabel:
| faktor | Code Opdeling | Lazy Loading |
|---|---|---|
| Definition | Opdeler kode i bidder | Indlæser chunks efter behov |
| Værktøj | Webpack, Vite | React.lazy, dynamisk import() |
| Formål | Optimer bundtstørrelse | Forbedre runtime-ydeevnen |
| Udførelse | Byggetid | Runtime |
Eksempel:
const Settings = React.lazy(() => import('./Settings'));
Brugt sammen reducerer disse teknikker tiden til interaktivitet og forbedrer den oplevede hastighed af store apps.
31) Forklar konceptet med Render Props, og hvordan det adskiller sig fra Higher-Order Components (HOC'er).
Svar:
Render rekvisitter er et mønster i React, hvor en komponent accepterer en fungere som en rekvisit der fortæller den, hvad den skal gengive. Dette gør det muligt at dele komponentlogik mellem flere komponenter uden duplikering.
HOC'er, derimod, wrap en komponent og returnere en forbedret version med indsprøjtede props eller adfærdsmønstre.
Sammenligningstabel:
| faktor | Render rekvisitter | HOC |
|---|---|---|
| Implementering | Funktion som barn | Funktionsombrydningping komponent |
| Sammensætning | Inline-kontrol | Deklarativ ombrydningping |
| Læsbarhed | Ofte tydeligere | Kan forårsage indpakningshelvede |
| Use Case | Dynamisk gengivelseslogik | Tværgående bekymringer |
Eksempel:
<DataProvider render={data => <UserList users={data} />} />
Render Props tilbyder bedre fleksibilitet og undgår navnekollisioner, der er almindelige i HOC'er.
32) Hvad er de forskellige typer af specialfremstillede kroge, og deres fordele?
Svar:
Brugerdefinerede hooks indkapsler genanvendelig logik, der kombinerer tilstand, bivirkninger og værktøjer. De forbedrer kodens genbrugelighed, adskillelse af bekymringer og testbarhed.
Typer og eksempler:
- Statslige ledelseskroge -
useToggle,useForm. - Datahentningskroge -
useFetch,useQuery. - UI/UX-kroge -
useWindowSize,useDarkMode. - Integrationskroge -
useLocalStorage,useMediaQuery. - Performance-kroge -
useDebounce,useThrottle.
fordele:
- Centraliseret logisk genbrug.
- Renere komponenter.
- Uafhængig testning.
Eksempel:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) Hvordan håndterer man hukommelseslækager i React-applikationer?
Svar:
Hukommelseslækager opstår, når ikke-monterede komponenter stadig indeholder referencer til ressourcer eller abonnementer. De forringer ydeevnen og forårsager uforudsigelig adfærd.
Forebyggelsesteknikker:
- Oprydningseffekter in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Afbryd asynkrone opkald ved brug af
AbortController. - Undgå at beholde gamle lukninger refererer til gamle rekvisitter/tilstand.
- Afmeld dig fra begivenheder eller sockets ved afmontering.
- Brug React Profiler at opdage langsom hukommelsesvækst.
Eksempel:
I en chatapp skal du altid afbryde forbindelsen til socket-lyttere, når en bruger navigerer væk fra chatrummet.
34) Hvad er de bedste fremgangsmåder til håndtering af formularer i store React-applikationer?
Svar:
Administration af formularer i React-apps i virksomhedsskala kræver en balance mellem kontrol, ydeevne og vedligeholdelse.
Bedste praksis:
- Brug biblioteker som f.eks. Formica, Reager Hook Form eller Endelig formular til validering og feltregistrering.
- Gruppér relaterede felter ved hjælp af indlejrede komponenter eller kontekster.
- Ansøg skemavalidering (Jep, Zod) for konsistens skyld.
- Afhjælp tunge valideringer eller API-tjek.
- Hold formularens tilstand lokaliseret, medmindre det er nødvendigt globalt.
Eksempel:
React Hook Form minimerer gengivelser ved at isolere inputtilstanden.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) Hvilke designmønstre er mest nyttige i React-udvikling, og hvad er deres karakteristika?
Svar:
React egner sig naturligt til adskillige softwaredesignmønstre for at opnå vedligeholdelig og skalerbar UI-arkitektur.
| Mønster | Beskrivelse | Eksempel |
|---|---|---|
| Container-præsentationsenhed | Adskil logik (container) fra brugergrænseflade (præsentationsenhed) | DataContainer → UIComponent |
| Kontrolleret-Ukontrolleret | Administrer formulardata via state vs. DOM | Formik vs. rå input |
| Sammensatte komponenter | Forældrekontroller underordnet sammensætning | <Tabs><Tab /></Tabs> |
| Udbydermønster | Del status via kontekst | Temaudbyder |
| Hækmønster | Genbrug tilstandsfuld logik | useAuth, useFetch |
Eksempel:
A Tabs komponenten eksponerer kontekst, så <Tab> børn registrerer sig automatisk — en ren anvendelse af Sammensat komponent mønster.
36) Hvad er de vigtigste forskelle mellem React 18 og React 19?
Svar:
React 19 bygger videre på React 18's samtidige fundament med betydelige nye funktioner.
| Feature | Reager 18 | Reager 19 |
|---|---|---|
| Samtidig gengivelse | indført | Forbedret med bedre spænding |
| Serverkomponenter | Eksperimentel | Stabiliseret og integreret |
| Handlinger API | Ikke tilgængelig | Ny standard for håndtering af formularhandlinger |
| Indlæsning af aktiver | Manuel | Automatisk indlæsning af ressourcer |
| Forbedret fejlhåndtering | Grundlæggende | Granulær med grænsekroge |
Fordele:
React 19 fokuserer på enklere datamutationer, indbyggede formularhandlingerog forbedret asynkron kontrol, hvilket gør SSR og progressiv hydrering mere problemfri.
37) Hvordan fungerer mikrofrontend ArchiTekturintegration med React, og hvad er fordelene?
Svar:
Mikrofrontends opdeler en stor webapp i uafhængige, implementerbare frontend-moduler. I et React-økosystem er hver mikrofrontend en selvstændig app, der kan integreres via Modulføderation, iframes eller brugerdefinerede runtime-loadere.
fordele:
- Uafhængig implementering og skalering.
- Teamautonomi på tværs af teknologiske stakke.
- Hurtigere opbygning af pipelines.
Eksempel:
Ved brug af Webpack Module Federation, teams kan dynamisk eksponere React-komponenter på tværs af apps:
exposes: { './NavBar': './src/NavBar' }
Ulemper:
- Kompleksitet i delt tilstandsstyring.
- Ydelsesoverhead fra isolerede bundter.
38) Hvilke faktorer overvejer du ved skalering af en React-applikation i produktion?
Svar:
Skalering af React-applikationer involverer tekniske, arkitektoniske og operationelle overvejelser.
Nøglefaktorer:
- Code struktur — indføre monorepos (Nx/Turborepo) til modulær kodedeling.
- Statens ledelse — segmenter lokale vs. globale vs. servertilstande.
- Ydeevne — lazy loading, memoization, CDN caching.
- Overvågning — brug Sentry, Datadog eller LogRocket til fejl og metrikker.
- Testning og CI/CD — automatiserede pipelines og visuelle regressionstests.
Eksempel:
En stor e-handelsplatform skalerer React-apps ved hjælp af Next.js til SSR, Redux Toolkit til forudsigelig tilstand og mikro-frontends til isolerede vertikaler.
39) Hvordan tester man React-komponenter, der bruger asynkron adfærd?
Svar:
Test af asynkrone React-komponenter kræver synkronisering mellem testrunneren og komponentens tilstandsopdateringer.
Bedste praksis:
- Brug
waitFororfindBy*forespørgsler i React Testing Library. - Mock-hent-kald eller API'er ved hjælp af
msw. - Foretrække falske timere (
jest.useFakeTimers()) for timeout-baserede effekter.
Eksempel:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Dette sikrer, at testen venter på Reacts asynkrone opdateringer, før den foretager assertions.
40) Forklar, hvordan du ville designe en storstilet, vedligeholdelig React-projektstruktur.
Svar:
Et skalerbart React-projekt skal balancere modularitet, klarhed og teamsamarbejde.
Anbefalet mappestruktur:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
Bedste praksis:
- Brug absolutte importer med sti-aliasser.
- Oprethold streng fnugrensning (ESLint + Prettier).
- Brug TypeScript for typesikkerhed.
- Håndhæv komponentgrænser med atomdesign eller funktionsbaseret slicing.
Eksempel:
I en virkelig opsætning kan en "Bruger"-funktion omfatte UserSlice.js, UserAPI.js, UserCard.jsxog User.test.js, alt indenfor src/features/user/.
🔍 De bedste interviewspørgsmål til React.js med virkelige scenarier og strategiske svar
1) Hvad er de vigtigste forskelle mellem funktionelle komponenter og klassekomponenter i React.js?
Forventet af kandidaten: Intervieweren vil teste din forståelse af React-komponentarkitektur og moderne bedste praksis.
Eksempel på svar:
"Funktionelle komponenter er enklere og er afhængige af hooks til at administrere tilstands- og livscyklusmetoder, hvorimod klassekomponenter bruger" this og livscyklusmetoder som f.eks. componentDidMountFunktionelle komponenter foretrækkes generelt i dag, fordi de fremmer renere kode, er nemmere at teste og yder bedre på grund af optimeringer i Reacts renderingsproces.
2) Kan du forklare, hvordan den virtuelle DOM fungerer i React?
Forventet af kandidaten: Intervieweren ønsker at evaluere din forståelse af Reacts kernepræstationsmekanisme.
Eksempel på svar:
"Den virtuelle DOM er en repræsentation af den virkelige DOM i hukommelsen. Når en komponents tilstand ændres, opdaterer React først den virtuelle DOM, sammenligner den med den tidligere version ved hjælp af en proces kaldet 'diffing', og opdaterer derefter kun de dele af den virkelige DOM, der er ændret. Denne tilgang forbedrer ydeevnen ved at minimere direkte DOM-manipulation."
3) Hvordan administrerer man tilstand i en storstilet React-applikation?
Forventet af kandidaten: Intervieweren vil gerne vide om din erfaring med teknikker og værktøjer til statslig forvaltning.
Eksempel på svar:
"I store applikationer bruger jeg typisk centraliserede tilstandsstyringsbiblioteker som Redux eller Zustand. Redux giver en forudsigelig datastrøm og gør fejlfinding nemmere gennem tidsrejse-fejlfindingsværktøjer. Til enklere applikationer foretrækker jeg at bruge Context API og hooks for at undgå unødvendig kompleksitet."
4) Beskriv et tidspunkt, hvor du optimerede React-ydeevnen.
Forventet af kandidaten: Intervieweren ønsker at forstå din praktiske erfaring med præstationsoptimering.
Eksempel på svar:
"I min tidligere rolle gengav vores applikation for meget på grund af unødvendige tilstandsændringer. Jeg brugte React.memo og useCallback hook for at forhindre unødvendige gengivelser. Jeg analyserede også ydeevnen ved hjælp af React Profiler og identificerede komponenter, der skulle huskes, hvilket reducerede gengivelsestiden med næsten 30%.
5) Hvordan håndterer du bivirkninger i React?
Forventet af kandidaten: Intervieweren ønsker at vurdere din forståelse af hooks og livscyklusstyring.
Eksempel på svar:
"Jeg håndterer bivirkninger såsom API-kald eller DOM-manipulationer ved hjælp af useEffect Hook. Hook'en giver mig mulighed for at angive afhængigheder, hvilket sikrer, at effekten kun kører, når disse afhængigheder ændrer sig. Dette hjælper med at opretholde forudsigelig adfærd og undgå uendelige løkker.”
6) Fortæl mig om en udfordrende fejl, du stødte på i et React-projekt, og hvordan du løste den.
Forventet af kandidaten: Intervieweren ønsker at vurdere dine evner til problemløsning og fejlfinding.
Eksempel på svar:
"På en tidligere position stødte jeg på en fejl, hvor tilstandsopdateringer ikke blev afspejlet i brugergrænsefladen. Efter at have undersøgt problemet, indså jeg, at problemet skyldtes direkte mutation af tilstandsobjektet i stedet for at oprette en ny kopi. Jeg refaktorerede koden til at bruge uforanderlige opdateringer, hvilket løste problemet og forbedrede datakonsistensen."
7) Hvordan håndterer du formularvalidering i React-applikationer?
Forventet af kandidaten: Intervieweren vil se, om du forstår, hvordan man implementerer validering af brugerinput.
Eksempel på svar:
"Jeg bruger typisk kontrollerede komponenter til at administrere formularinput, kombineret med biblioteker som Formik eller React Hook Form til validering. Disse værktøjer forenkler håndtering af fejl, styring af formulartilstand og integration med tredjepartsvalideringsbiblioteker som f.eks. Yup."
8) Beskriv en situation, hvor du var nødt til at samarbejde med backend-udviklere, mens du arbejdede på et React-projekt.
Forventet af kandidaten: Intervieweren vil gerne evaluere dine teamwork- og kommunikationsevner.
Eksempel på svar:
"I min sidste rolle samarbejdede jeg tæt med backend-udviklere for at designe REST API'er til en dashboard-applikation. Vi blev enige om dataformater og endpoints i de tidlige udviklingsfaser. Jeg oprettede også mock responses for at fortsætte frontend-udviklingen, mens backend'en blev bygget, hvilket sikrede en problemfri integration senere."
9) Hvordan sikrer du, at dine React-komponenter er genanvendelige og vedligeholdelsesvenlige?
Forventet af kandidaten: Intervieweren vil gerne vide om din tilgang til komponentdesign og skalerbarhed.
Eksempel på svar:
"Jeg følger princippet om at bygge små, fokuserede komponenter, der håndterer ét ansvar. Jeg bruger også props for fleksibilitet, og jeg holder fast i modulær styling med CSS-in-JS eller styled-components. Dette sikrer, at komponenter nemt kan genbruges og vedligeholdes på tværs af projektet."
10) Hvordan holder du dig opdateret med React.js-trends og bedste praksis?
Forventet af kandidaten: Intervieweren ønsker at evaluere din forpligtelse til kontinuerlig læring.
Eksempel på svar:
"Jeg holder mig opdateret ved at følge Reacts officielle dokumentation og community-blogs. Jeg ser også foredrag fra React-konferencer som f.eks. React Conf og lytter til podcasts som 'React Podcast'. Disse ressourcer hjælper mig med at holde mig informeret om nye funktioner som f.eks. samtidig rendering og serverkomponenter."
