Topp 40 intervjuspørsmål og svar for React JS (2026)

by: James Hartman James Hartman
Hours oppdatert

Forbereder du deg til et intervju med React JS? Det er på tide å utforske hva som venter deg. Forståelse React JS intervjuspørsmål bidrar til å avdekke både din konseptuelle klarhet og dine styrker i implementeringen i den virkelige verden.

React JS tilbyr enorme karrieremuligheter for fagfolk med teknisk erfaring og domeneekspertise. Enten du er nyutdannet eller senior med 5 eller 10 års yrkeserfaring, er det viktig å analysere ferdigheter og teknisk ekspertise. Disse spørsmålene og svarene hjelper teamledere, ledere og utviklere med å forbedre ferdighetene sine og komme til toppjobb.

Basert på innsikt fra over 85 fagfolk, inkludert ansettelsesansvarlige og tekniske ledere, gjenspeiler denne samlingen ulike bransjeforventninger og reelle intervjumønstre samlet inn fra arbeidsteam på tvers av ulike domener.

Spørsmål og svar om intervju i React JS

De beste intervjuspørsmålene og svarene for React JS

1) Forklar den virtuelle DOM-en og hvordan avstemming fungerer i React.

Svar:

Den virtuelle DOM-en er en minnebasert representasjon av brukergrensesnittet som React vedlikeholder for å effektivt beregne endringer i brukergrensesnittet. Når tilstand eller props muterer, gjengir React et nytt virtuelt DOM-tre, og kjører deretter en forskjellig algoritme mot det forrige treet for å oppdage det minimale settet med reelle DOM-operasjoner som kreves. Denne prosessen, kalt avstemming, minimerer layout-ødeleggelse og kostbare nettleseromlegginger. React tildeler nøkler til elementer i lister for å hjelpe den med å matche noder på tvers av gjengivelser, og den bruker heuristikker (som å sammenligne typer og nøkler) for å avgjøre om noder skal oppdateres, endre rekkefølgen eller fjernes. Fordelene inkluderer forutsigbare oppdateringer, mindre overflateareal for feil og bedre ytelse i komplekse brukergrensesnitt.

Eksempel:

Gjengivelse av en dynamisk liste over chatmeldinger: ved å bruke stabil key verdier (meldings-ID-er), legges bare nye meldinger til DOM-en, mens eksisterende noder forblir urørt, slik at unødvendige gjengivelser unngås.

👉 Gratis PDF-nedlasting: Spørsmål og svar om intervju i React JS

2) Hva er de ulike typene komponentlivssykluser i React, og hvordan tilordnes Hooks til dem?

Svar:

React-komponenter går gjennom monterings-, oppdaterings- og avmonteringsfaser. I klassekomponenter brukes livssyklusmetoder som componentDidMount, shouldComponentUpdate, componentDidUpdateog componentWillUnmount styrer bivirkninger, gjengivelsesbeslutninger og opprydding. I funksjonskomponenter, kroker tilby tilsvarende muligheter: useEffect håndterer effekter etter rendering; oppryddingfunksjoner inni useEffect kjør ved avmontering eller før neste effekt; useMemo og useCallback kontrollmemoisering; og useRef bevarer mutbare referanser på tvers av gjengivelser. Fordelene med Hooks inkluderer komponerbarhet, færre "dette"-bindingsproblemer og enklere gjenbruk av logikk gjennom tilpassede hooks, mens den største ulempen er behovet for å lære seg Hook-regler og avhengighetshåndtering.

Svar med eksempler:

  • Monteringseffekt: useEffect(() => fetchData(), []).
  • Opprydding ved avmontering: useEffect(() => { start(); return stop; }, []).

3) Hvordan velger du mellom klientsiderendering (CSR), serversiderendering (SSR), statisk nettstedgenerering (SSG) og inkrementell statisk regenerering (ISR) for en React-applikasjon?

Svar:

Gjengivelsesstrategien bør styres av krav til brukeropplevelse, dataaktualitet, SEO-behov, infrastrukturbegrensninger og utviklingshastighet. CSR passer til svært interaktive apper bak autentisering der SEO er sekundært. SSR gir første maling med reelle data for offentlige sider, noe som forbedrer tid til første byte og SEO, men med høyere serverkostnader. SSG forhåndsberegner sider under bygging for utmerket hastighet og mellomlagring når data endres sjelden. ISR oppdaterer statiske sider trinnvis etter behov, og tilbyr en balanse mellom aktualitet og ytelse. Faktorene inkluderer mellomlagring, personalisering, ventetid for globale målgrupper og driftskompleksitet.

Tabell: Fordeler vs. ulemper

Tilnærming Fordeler Ulemper
CSR Enkel hosting, rik interaktivitet Tregere første lakkering, svakere SEO
SSR God SEO, ferske data ved første lasting Høyere serverbelastning, kompleksitet
SSG Raskt, billig, CDN-vennlig Gammelt innhold inntil gjenoppbygging
ISR Rask med kontrollert friskhet Flere bevegelige deler å håndtere

4) Hvilken tilstandsstyringsstrategi bør brukes: lokal tilstand, kontekst, Redux eller spørrebiblioteker?

Svar:

Velg enkleste verktøyet som håndterer problemets egenskaper. Komponent-lokal tilstand via useState or useReducer er ideell for isolerte brukergrensesnittproblemer. Kontekst fungerer for hovedsakelig lesebeskyttede, applikasjonsomfattende verdier (tema, språk, gjeldende bruker), men er ikke optimalisert for høyfrekvente oppdateringer på tvers av store trær. Redux eller lignende hendelsesbaserte butikker utmerker seg når du trenger forutsigbarhet, feilsøking med tidsreiser, mellomvare og strenge enveis dataflyter. Biblioteker for datahenting (for eksempel mønstre i React Query-stil) administrerer servertilstandslivssykluser – mellomlagring, deduplisering, henting av nye strategier og synkronisering – noe som reduserer standardprinsippet. En pragmatisk arkitektur bruker ofte lokal tilstand + kontekst for konfigurasjon + et servertilstandsbibliotek, og reserverer Redux for komplekse arbeidsflyter.

Eksempel:

Et dashbord bruker React Query for API-caching, kontekst for tema og useReducer inne i komplekse widgeter for lokal hendelseshåndtering.

5) Hva er forskjellen mellom useEffect og useLayoutEffect, og når gjelder hver av dem?

Svar:

useEffect kjører etter at nettleseren har malt, noe som gjør den egnet for ikke-blokkerende oppgaver som datahenting, abonnementer og logging. useLayoutEffect Utfører synkront etter DOM-mutasjoner, men før maling, noe som tillater justeringer av målinger og layout som må skje uten flimring (for eksempel lesing av elementstørrelser og synkron påføring av stiler på nytt). Ulempen med useLayoutEffect er at den kan blokkere maling og skade responsiviteten hvis den brukes for mye. En god regel er å starte med useEffect for bivirkninger og nå ut til useLayoutEffect bare når du må måle eller synkront mutere layout for å sikre visuell korrekthet.

Svar med eksempler:

  • useEffectHent brukerprofil etter gjengivelse.
  • useLayoutEffectmål størrelsen på et verktøytips for å plassere det før maling.

Rask sammenligning

Karakteristisk useEffect brukLayoutEffect
timing Etter maling Før maling
Bruk saken Data, abonnementer Målinger, rettelser for synkron layout
Risiko Mindre støt hvis tungt Blokkerer maling hvis den er tung

6) Forklar hvordan nøkler fungerer i lister og fallgruvene ved bruk av arrayindekser.

Svar:

Nøkler gjør det mulig for Reacts avstemming å identifisere listeelementer nøyaktig mellom gjengivelser. Stabile, unike nøkler lar React endre rekkefølgen, sette inn eller fjerne elementer med minimal DOM-frafall. arrayindekser som nøkler er problematisk når elementer kan omorganiseres, settes inn eller slettes fordi React kan assosiere tidligere tilstand med feil element, noe som forårsaker subtile feil (for eksempel feil inputverdier eller animasjoner). Beste praksis er å bruke en uforanderlig, domenespesifikk identifikator, for eksempel en database-ID. Hvis listen er virkelig statisk og aldri omorganiseres, er indekser akseptable, men dette er unntaket snarere enn regelen.

Eksempel:

Et drabart Kanban-tavle bør bruke kort-ID-er, ikke indekser, for å bevare komponentidentiteten under dra-og-slipp-funksjonalitet.

RELATERTE ARTIKLER

7) Hvor brukes memo-teknikker i React, og hva er fordelene og ulempene deres?

Svar:

Memoisering reduserer unødvendige beregninger og gjengivelser ved å bruke tidligere resultater på nytt når input ikke har endret seg. I React, React.memo utdata for hurtigbufferkomponenter, useMemo mellomlagrer dyre beregninger, og useCallback husker funksjonsidentiteter som sendes til underordnede. De primære fordelene er ytelsesstabilitet og redusert CPU-bruk under tung interaksjon. Ulemper inkluderer kompleksitet, potensielle feil i foreldet hurtigbuffer hvis avhengighetene er feil, og minneoverhead.

Tabell: Ulike måter å huske på

typen Formål Typiske faktorer å vurdere
React.memo(Component) Hopp over ny gjengivelse hvis rekvisittene er grunne-lik Prop-volatilitet, barnekostnad
useMemo(fn, deps) Bufre beregnede verdier Kostnad for databehandling kontra minne
useCallback(fn, deps) Stabil funksjonsidentitet Avhengighetens korrekthet

Svar med eksempler:

Husk et filtrert, sortert datasett for et rutenett ved hjelp av useMemo, og pakk inn cellegjengivelseskomponenter med React.memo for å unngå gjentatte stormer.

8) Foretrekker du kontrollerte eller ukontrollerte komponenter for skjemaer? Diskuter fordeler, ulemper og typer skjematilstander.

Svar:

Kontrollerte komponenter bind inndata til React-tilstand via value og onChange, som muliggjør validering, maskering og betinget brukergrensesnitt utledet fra én enkelt sannhetskilde. Fordelene er forutsigbarhet og enkel integrasjon med andre tilstander; ulempene inkluderer kostnad for gjengivelse på nytt ved hvert tastetrykk uten optimalisering. Ukontrollerte komponenter stole på DOM som sannhetskilde ved bruk av referanser, noe som gir lavere overhead og enklere kabling for grunnleggende skjemaer, men mindre sentralisert validering. For komplekse arbeidsflyter er et hybridmønster vanlig, der kontrollerte inndata for kritiske felt og ukontrollerte for store, teksttunge områder brukes.

Eksempel:

Et registreringsskjema bruker kontrollerte felt for validering av e-post og passord, mens et tekstområde for notater er ukontrollert for å redusere kostnadene ved gjengivelse på nytt.

9) Når ville du brukt kontekst kontra en tilpasset hook, og hva er konseptuelt forskjellen mellom dem?

Svar:

Kontekst er en transportmekanisme for verdier som mange komponenter trenger, og unngår propellboring. Den administrerer ikke tilstanden alene; den eksponerer den bare for etterkommere. tilpasset krok innkapsler gjenbrukbar logikk – som kombinerer tilstand, effekter og eksterne tjenester – og returnerer verdier og funksjoner. Bruk kontekst til å tilby delt, for det meste lest konfigurasjon eller for å eksponere en butikk, og bruk tilpassede kroker for å implementere butikkens oppførsel eller for å orkestrere bekymringer som autentisering, funksjonsflagg eller policyer for datahenting. De to er komplementære: et felles mønster er useAuth() som en tilpasset krok støttet av en AuthContext.

Svar med eksempler:

AuthProvider leverer bruker og tokens via Context; useAuth håndterer bivirkninger ved innlogging, oppdatering og utlogging.

10) Kan du skissere strategier for ytelsesjustering for store React-applikasjoner, inkludert kjennetegn ved langsomme gjengivelser og livssyklus-hotspots?

Svar:

Ytelsesjustering starter med måling. Identifiser langsomme baner ved hjelp av React DevTools Profiler og ytelsespaneler i nettleseren for å finne avstemmingspunkter og dyre commits. Taktikker inkluderer statlig lokalitet (holde staten nær forbrukerne sine), memoisering (React.memo, useMemo, useCallback), listevirtualisering for lange lister, kodedeling med lat lasting for å redusere den første pakken, og avspringing eller struping hendelser med høy frekvens. For serverbaserte data, bruk mellomlagring med et spørrebibliotek og utnytt spenningsvennlig mønstre for jevnere lasting. Se etter livssyklus-hotspots, som effekter som kjører for ofte på grunn av brede avhengighetsmatriser, eller komponenter som gjengis på nytt på grunn av ofte endrede kontekstverdier.

Svar med eksempler:

Virtualiser en tabell med 10 000 rader ved hjelp av et vindusbibliotek; last tunge diagrammer med lav hastighet bak rutebasert kodedeling for å forbedre den første malingen.

11) Hva er forskjellen mellom props og state i React?

Svar:

Begge props og state påvirke hvordan komponenter gjengis, men formålet og livssyklusen deres er fundamentalt forskjellige. rekvisitter (forkortelse for egenskaper) er uforanderlige inndata som sendes fra en overordnet til en underordnet komponent, og definerer konfigurasjon eller data for gjengivelse. De flyter nedadgående i Reacts enveisdataflyt og skal aldri endres av mottakerkomponenten. Tilstand, derimot, er modifiserbar og vedlikeholdes internt av komponenten. Den bestemmer dynamisk atferd som endres over tid, for eksempel skjemainndataverdier eller aktivert synlighet.

Tabell over viktige forskjeller:

Faktor rekvisitter Tilstand
mutability Uforanderlig Kan endres
Eierskap Vedtatt av forelder Eid av komponent
Oppdateringsmetode Foreldre gjengir på nytt useState or setState
Bruk sak Konfigurasjon Dynamiske endringer i brukergrensesnittet
Lifecycle Eksisterer under gjengivelse Vedvarer, utløser nye gjengivelser

Eksempel:

A <Button color="blue" /> bruker rekvisitter til å bestemme farge, mens en clicked boolsk i sin tilstand slår av/på visuell tilbakemelding.

12) Forklar komponentarkitekturmønsteret i React og de ulike måtene komponenter klassifiseres på.

Svar:

React-applikasjoner følger en komponentbasert arkitektur, og deler opp brukergrensesnittet i små, gjenbrukbare byggeklosser. Komponenter kan kategoriseres etter deres formål og ansvar:

  1. Presentasjonskomponenter (dumme) – Fokuser på brukergrensesnitt, motta data via rekvisitter og sjelden administrere tilstand.
  2. Containerkomponenter (smarte) – Håndterer logikk, henter data og administrerer tilstand; de gjengir presentasjonskomponenter.
  3. Høyereordenskomponenter (HOC-er) – Funksjoner som tar en komponent og returnerer en forbedret versjon med tilleggsvirksomhet.
  4. Rene komponenter – Optimaliser ytelsen ved å overfladisk sammenligne rekvisitter og tilstand.
  5. Funksjonelle vs. klassekomponenter – Funksjonelle komponenter (med kroker) foretrekkes nå for lesbarhet og ytelse.

Eksempel:

A <UserProfile /> komponenten kan være presentasjonsmessig, motta brukerinformasjon, mens <UserProfileContainer /> henter data og administrerer livssyklusen deres.

13) Hvordan håndterer React feilgrenser, og hvorfor er de viktige?

Svar:

Feilgrenser er spesielle React-komponenter som fanger opp JavaSkriptfeil hvor som helst i deres underordnede komponenttre under gjengivelse, livssyklusmetoder eller konstruktører. De forhindrer hele appkrasj ved å isolere feil til bestemte undertrær. Du kan implementere en ved hjelp av componentDidCatch(error, info) og static getDerivedStateFromError() i en klassekomponent.

Fordeler:

  • Bevar brukergrensesnittets stabilitet ved å vise alternative brukergrensesnitt.
  • Registrer og loggfør feil for analyser.
  • Forhindre kaskaderende avmonteringer.

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) Hva er React Fragments, og hvordan skiller de seg fra wrapper elementer?

Svar:

Reager fragmenter (<></>) lar deg gruppere flere elementer uten å legge til ekstra noder i DOM-en. Dette er viktig for en renere struktur, spesielt i lister, tabeller og semantisk HTML der ekstra wrappers kan forårsake problemer med layout eller tilgjengelighet. I motsetning til wrapper <div>s, Fragmenter gjengis ikke til DOM-en og har derfor ytelses- og semantiske fordeler.

Eksempel:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Differansetabell:

Faktor fragment <div> Wrapper
DOM-utdata none Legger til ekstra node
Bruk sak Strukturell gruppering Styling eller layout
Ytelse Bedre Litt overhead

15) Hvilken React Hook ville du brukt for ytelsesoptimalisering, og hvorfor?

Svar:

Ytelsessensitive React-komponenter er ofte avhengige av memo-kroker og lat lasting for å minimere overflødig arbeid. Vanlige kroker inkluderer:

  • useMemo → Lagrer beregningsmessig dyre resultater.
  • useCallback → Forhindrer unødvendige underordnede gjengivelser på grunn av endringer i funksjonsidentitet.
  • useTransition → Utsetter ikke-hastede oppdateringer for et smidigere brukergrensesnitt.
  • useDeferredValue → Utsetter tunge beregninger til etter umiddelbare interaksjoner.

Eksempel:

Et stort datanett som bruker useMemo for filtrerte resultater kan redusere CPU-forbruket med 50 % eller mer.

Fordeler:

  • Reduserer bortkastede gjengivelser.
  • Holder brukergrensesnittet responsivt under belastning.

Ulempe:

  • Krever avhengighetspresisjon; foreldede hurtigbufferfeil kan oppstå hvis de håndteres feil.

16) Hva er React-portaler, og hva er fordelene med dem?

Svar:

portaler tillate React-komponenter å gjengi underordnede elementer i en DOM-node utenfor sitt overordnede hierarki, vanligvis for modaler, verktøytips eller rullegardinmenyer som visuelt må "unngå" overløp eller stablingskontekster. Implementert ved hjelp av ReactDOM.createPortal(child, container), de opprettholder konsistens i hendelsesboblene, slik at hendelseshåndterere fungerer som om elementet forble innenfor sitt opprinnelige hierarki.

Fordelstabell:

Fordelene Tekniske beskrivelser
Strukturell uavhengighet Gjengi utenfor foreldretreet
CSS/stablingskontroll Unngå overflow: hidden eller z-indeksproblemer
Hendelsesforplantning Reacts syntetiske hendelser bobler fortsatt riktig
Reus Evne Ideell for globale overlegg

Eksempel:

createPortal(<ModalContent />, document.getElementById('modal-root'));

17) Forklar hvordan React Router håndterer navigasjon og tilstand mellom sider.

Svar:

React Router er et deklarativt rutingsbibliotek som synkroniserer brukergrensesnittet med nettleserens URL. Det bruker historikk-API å manipulere økthistorikk uten å laste inn helsides på nytt. Kjernekonsepter inkluderer ruter, lenkerog Outlet for nestet ruting. Biblioteket støtter dynamiske ruter, URL-parametereog navigasjonskroker (useNavigate, useParams, useLocationReact Router v6 introduserte en forenklet syntaks og data-API-er for loader og handling funksjoner, forbedring av SSR-integrasjon og tilstandsstyring.

Eksempel:

<Route path="/user/:id" element={<UserProfile />} />

Fordeler:

  • Aktiverer navigasjon på én side.
  • Beholder rulleposisjon og historikk.
  • Integreres rent med lazy loading for bedre ytelse.

18) Hva er de ulike måtene å håndtere bivirkninger i React-applikasjoner?

Svar:

Bivirkninger refererer til handlinger som påvirker noe utenfor en komponents omfang (API-kall, DOM-manipulasjon, abonnementer). De viktigste verktøyene inkluderer:

  1. useEffect for klient-sideeffekter etter rendering.
  2. Eventbehandlere for brukerstyrte effekter.
  3. Tilpassede kroker å gjenbruke effektlogikk (for eksempel useFetch).
  4. Middleware (som Redux Saga eller Thunk) for kompleks asynkron orkestrering.
  5. React Query eller SWR for å administrere servertilstand og automatisk hente livssykluser på nytt.

Eksempel:

A useEffect henter data etter montering:

useEffect(() => { fetchData(); }, []);

Fordeler:

Forenklet asynkron administrasjon, bedre innkapsling og tydeligere livssykluskontroll.

19) Er React et rammeverk eller et bibliotek? Diskuter faktorene som definerer forskjellen.

Svar:

React er offisielt en bibliotek, ikke et fullverdig rammeverk. Det fokuserer utelukkende på visningslag, som gir abstraksjoner for gjengivelse, tilstand og komponent uten å håndheve ruting, datahenting eller byggestruktur.

Sammenligningstabell:

Faktor Bibliotek (React) Rammeverk (Angular, Vue)
Omfang Vis gjengivelse Full MVC-arkitektur
sta Lav Høyt
Kontroll: Utviklerdrevet Rammeverksdrevet
Fleksibilitet Høyt Begrenset av konvensjoner
Læringskurve Moderat Høyere på grunn av kompleksitet

Reacts økosystem (Redux, Router, Query, Next.js) danner effektivt et «meta-rammeverk» som tilbyr modulær komponerbarhet som lar utviklere bygge sin egen arkitektur.

20) Når bør du bruke React.lazy og Suspense, og hva er fordelene med dem?

Svar:

React.lazy muliggjør kodedeling ved å laste inn komponenter dynamisk bare når det er nødvendig, mens Suspense gir et reservegrensesnitt inntil komponenten er klar. Denne kombinasjonen forbedrer ytelsen ved første innlasting og brukeropplevd respons.

Eksempel:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

Fordelstabell:

Fordelene Forklaring
Ytelse Laster inn kode på forespørsel
Brukererfaring Grasiøs lasting reserve
Buntstørrelse Mindre innledende pakke
Enkelhet Native React API, minimal oppsett

Beste praksis:

  • Pakk flere late komponenter inn i én Suspense-grense.
  • Bruk meningsfulle reserveindikatorer for tilgjengelighet.

21) Forklar hva React Server Components (RSC-er) er og fordelene deres.

Svar:

React Server Components (RSC-er) er en viktig innovasjon introdusert for å forbedre ytelsen og utvikleropplevelsen ved å tillate komponenter å gjengi på serveren uten å sende sine JavaSkript til klientenDe kjøres utelukkende på serveren, henter data, leser fra databaser eller utfører I/O-operasjoner sikkert før de strømmer serialisert utdata til klienten.

Fordeler:

  • Mindre buntstørrelse – Ingen klient-JS for kun server-logikk.
  • Forbedret ytelse — Henting av data på serversiden reduserer vannfall.
  • Trygghet — Sensitiv kode når aldri nettleseren.
  • Bedre mellomlagring — Serverkomponenter kan mellomlagres i utkanten.

Eksempel:

A <ProductList /> serverkomponenten kan hente data direkte fra en database og sende resultatene til en <ProductCard /> klientkomponent.

22) Hva er forskjellen mellom React-hydrering og -avstemming?

Svar:

Selv om begge begrepene innebærer at React oppdaterer brukergrensesnittet, er formålet deres forskjellig:

  • Forsoning er prosessen med å sammenligne det virtuelle DOM-treet med dets tidligere versjon for å bestemme det minimale settet med DOM-oppdateringer.
  • Hydration, derimot, er prosessen med å knytte Reacts hendelseslyttere og interne strukturer til server-gjengitt HTML på klientsiden, og gjør statisk markup om til en fullstendig interaktiv app.

Sammenligningstabell:

Faktor Forsoning Hydration
Avtrekker Klientgjengivelse på nytt Første sideinnlasting (SSR)
Formål Oppdater DOM effektivt Gjør SSR HTML interaktiv
Omfang Virtuell DOM-forskjell Hendelsesbinding + tilstandsgjenoppretting
Frekvens Flere ganger En gang etter SSR-gjengivelse

Eksempel:

Etter at en Next.js-app sender forhåndsrendert HTML, React hydrater slik at komponenter reagerer på hendelser uten å gjengi alt på nytt.

23) Hvordan forbedrer samtidig gjengivelse brukeropplevelsen i React 18+?

Svar:

Samtidig rendering lar React avbryte, sette på pause eller gjenoppta renderingsarbeid basert på brukerprioritet. Dette forhindrer at brukergrensesnittet fryser under tunge beregninger eller ny rendering. Funksjoner som useTransition og useDeferredValue utnytt denne muligheten til å skille hasteoppdateringer (som å skrive) fra ikke-haster de (som filtrering).

Fordeler:

  • Smidige, responsive interaksjoner.
  • Tidsdeling for å forhindre blokkering av hovedtråden.
  • Forutsigbar prioritering for bedre brukeropplevelse.

Eksempel:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

Her forblir skrivingen flytende selv når man filtrerer store datasett, fordi React planlegger ikke-haster oppdateringer samtidig.

24) Hva er de forskjellige måtene å utføre testing i React-applikasjoner?

Svar:

Reaksjonstesting kan klassifiseres i enhet, integreringog ende til ende nivåer.

Tabell for testmetoder:

typen Tool Formål
Enhet det er Teste isolerte funksjoner/komponenter
Integrasjon React Testing Library Test UI-interaksjoner og tilstandsendringer
E2E Cypress / Dramatiker Test brukerflyter i ekte nettlesere

Beste praksis:

  • Kjøp helst React Testing Library over enzym (moderne, DOM-orientert).
  • Mock-API-er som bruker msw (Simulert servicearbeider).
  • Unngå å teste implementeringsdetaljer – fokuser på atferd.

Eksempel:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

25) Hvilke byggeverktøy og pakkeløsninger brukes oftest med React, og hva er forskjellene mellom dem?

Svar:

React kan integreres med flere bundlere og kompilatorer, som hver er optimalisert for forskjellige brukstilfeller.

Sammenligningstabell:

Tool Kjennetegn Fordeler Ulemper
Webpack Meget konfigurerbar Moden, rik på pluginer Kompleks oppsett
Bor ESM-basert, lynrask utviklerserver Øyeblikkelig HMR, moderne syntaks Begrenset støtte for eldre plugin-moduler
Pakke Nullkonfigurasjon Automatisk optimalisering Less fleksibel
esbuild Go-basert kompilator Ekstremt raskt Færre økosystem-plugins

Eksempel:

Moderne prosjekter bruker ofte Bor for utviklingshastighet og esbuild i CI/CD-rørledninger for effektive produksjonsbygg.

26) Hvordan utvider Next.js Reacts muligheter?

Svar:

Next.js er en React-rammeverket tilbyr en nøkkelarkitektur for ruting, SSR og generering av statisk statistikk. Den introduserer hybride renderingsmodeller, API-ruter og funksjoner for kantklar distribusjon.

Fordeler:

  • Innebygd SSR/SSG/ISR Støtte.
  • App-ruter med React Server-komponenter.
  • Bildeoptimalisering og mellomvare for ytelse og sikkerhet.
  • Enkle API-ruter for serverløse funksjoner.

Eksempel:

app/page.js for SSR-gjengitte sider; app/api/route.js for serverendepunkter.

I sammendragetNext.js muliggjør React-apper i produksjonsklassen med minimal konfigurasjon.

27) Hva er noen vanlige ytelsesfallgruver i React, og hvordan kan du unngå dem?

Svar:

Vanlige fallgruver i React-ytelsen inkluderer:

  1. Unødvendige gjengivelser — Fiks ved hjelp av React.memo eller å dele opp komponenter.
  2. Oppretting av innebygde objekter/matriser — Bruk useMemo for stabile referanser.
  3. Store lister — Implementer vindusstyring (react-window, react-virtualized).
  4. Tunge beregninger — Memoriser eller avlast til nettarbeidere.
  5. Overbruk av kontekst — Hyppige oppdateringer forplanter seg dypt; foretrekker avledet tilstand.

Eksempel:

Hvis du består { a: 1 } innebygd i en memobasert komponent, gjengis den på nytt på hver overordnede gjengivelse. Fiks dette ved å memo-innholdet i objektet.

Tabell for ytelsestips:

Problemet Optimaliseringsteknikk
Gjengivelser på nytt React.memo, useCallback
Dyre beregninger useMemo, Nettarbeidere
Store datasett virtualisering
Hyppige kontekstoppdateringer Lokaliser tilstand

28) Forklar forskjellen mellom useReducer og useState.

Svar:

Begge krokene administrerer tilstand, men de er forskjellige i kompleksitet og kontroll.

  • useState er ideell for enkle, isolerte tilstandsoverganger.
  • useReducer sentraliserer kompleks tilstandslogikk i en reduseringsfunksjon, Ved hjelp dispatch handlinger for forutsigbare oppdateringer.

Sammenligningstabell:

Faktor useState brukReducer
syntax [value, setValue] [state, dispatch]
kompleksitet Enkelt Moderat til komplekst
Bruk sak Uavhengige stater Relaterte eller nestede tilstander
Debugging Less ordrik Enklere via loggede handlinger
Eksempel Skjema-vekslere Skjemavalidering eller flertrinnsskjemaer

Eksempel:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

29) Hvordan kan du forbedre tilgjengeligheten (a11y) i React-applikasjoner?

Svar:

Tilgjengelighet sikrer at alle brukere, inkludert de med funksjonsnedsettelser, kan bruke appen din effektivt. React forenkler tilgjengelighet gjennom semantisk markup og ARIA-attributter.

Beste praksis:

  • Bruk semantisk HTML (<button> vs <div onClick>).
  • Styr fokus ved hjelp av ref og tabIndex.
  • Bruk ARIA-roller for dynamiske komponenter.
  • Sørg for fargekontrast og tekstalternativer for bilder.
  • Utnytt verktøy som eslint-plugin-jsx-a11y og økskjerne for revisjoner.

Eksempel:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

Fordeler:

  • Bredere publikumsrekkevidde.
  • SEO-forbedring.
  • Samsvar med WCAG-standarder.

30) Kan du beskrive hvordan kodedeling og lazy loading er forskjellige, og når man skal bruke hver av dem?

Svar:

Begge teknikkene optimaliserer buntstørrelse og lasteytelse, men er forskjellige i utførelsestidspunkt.

  • Kodesplitting deler store bunter inn i mindre biter som kan lastes uavhengig av hverandre.
  • Lazy loading forsinker lastingen av disse delene til de er nødvendige.

Sammenligningstabell:

Faktor Kodedeling Lazy Loading
Definisjon Deler koden inn i biter Laster inn biter på forespørsel
Tool Webpack, Vite React.lazy, dynamisk import()
Formål Optimaliser pakkestørrelsen Forbedre kjøreytelsen
Gjennomføring Byggetid Runtime

Eksempel:

const Settings = React.lazy(() => import('./Settings'));

Brukt sammen reduserer disse teknikkene tiden til interaktivitet og forbedrer den opplevde hastigheten til store apper.

31) Forklar konseptet med renderingsrekvisitter og hvordan det skiller seg fra komponenter av høyere orden (HOC-er).

Svar:

Gjengi rekvisitter er et mønster i React der en komponent aksepterer en fungere som en rekvisitt som forteller den hva den skal gjengi. Dette gjør at komponentlogikk kan deles mellom flere komponenter uten duplisering.

HOC-er, derimot, vikle en komponent og returnere en forbedret versjon med injiserte rekvisitter eller atferder.

Sammenligningstabell:

Faktor Gjengi rekvisitter HOC
Gjennomføring Funksjon som barn Funksjonsinnpakningskomponent
sammensetning Innebygd kontroll Deklarativ innpakning
lesbarhet Ofte tydeligere Kan forårsake innpakningshelvete
Bruk sak Dynamisk gjengivelseslogikk Tverrgående bekymringer

Eksempel:

<DataProvider render={data => <UserList users={data} />} />

Render Props tilbyr bedre fleksibilitet og unngår navnekollisjoner som er vanlige i HOC-er.

32) Hva er de forskjellige typene tilpassede kroker og fordelene deres?

Svar:

Tilpassede hooker innkapsler gjenbrukbar logikk som kombinerer tilstand, bivirkninger og verktøy. De forbedrer gjenbrukbarhet av kode, separasjon av bekymringer og testbarhet.

Typer og eksempler:

  1. Statlig ledelse kroker - useToggle, useForm.
  2. Hooks for datahenting - useFetch, useQuery.
  3. UI/UX-kroker - useWindowSize, useDarkMode.
  4. Integrasjonskroker - useLocalStorage, useMediaQuery.
  5. Ytelseskroker - useDebounce, useThrottle.

Fordeler:

  • Sentralisert logikkgjenbruk.
  • Renere komponenter.
  • Uavhengig testing.

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 du minnelekkasjer i React-applikasjoner?

Svar:

Minnelekkasjer oppstår når umonterte komponenter fortsatt inneholder referanser til ressurser eller abonnementer. De forringer ytelsen og forårsaker uforutsigbar oppførsel.

Forebyggingsteknikker:

  1. Oppryddingeffekter in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
  2. Avbryt asynkrone anrop ved hjelp av AbortController.
  3. Unngå å beholde gamle lukkinger refererer til gamle rekvisitter/tilstand.
  4. Avslutt abonnementet på arrangementer eller stikkontakter ved avmontering.
  5. Bruk React Profiler for å oppdage langsom hukommelsesvekst.

Eksempel:

I en chat-app, koble alltid fra socket-lyttere når en bruker navigerer bort fra chatterommet.

34) Hva er de beste fremgangsmåtene for å administrere skjemaer i store React-applikasjoner?

Svar:

Administrering av skjemaer i React-apper i bedriftsskala krever en balanse mellom kontroll, ytelse og vedlikeholdbarhet.

Beste praksis:

  • Bruk biblioteker som Formik, Reager krokformeller Endelig skjema for validering og feltregistrering.
  • Grupper relaterte felt ved hjelp av nestede komponenter eller kontekster.
  • Påfør skjemavalidering (Jepp, Zod) for konsistens skyld.
  • Avkreft tunge valideringer eller API-kontroller.
  • Hold skjematilstanden lokalisert med mindre det er nødvendig globalt.

Eksempel:

React Hook Form minimerer gjengivelser ved å isolere input-tilstanden.

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

35) Hvilke designmønstre er mest nyttige i React-utvikling, og hva er deres egenskaper?

Svar:

React egner seg naturlig til flere programvaredesignmønstre for vedlikeholdbar og skalerbar UI-arkitektur.

Pattern Tekniske beskrivelser Eksempel
Container-presentator Separat logikk (container) fra brukergrensesnitt (presentator) DataContainer → UIComponent
Kontrollert-ukontrollert Administrer skjemadata via tilstand kontra DOM Formik vs. rå inndata
Sammensatte komponenter Foreldrekontroller underordnet sammensetning <Tabs><Tab /></Tabs>
Leverandørmønster Del status via kontekst Temaleverandør
Hekmønster Bruk tilstandsfull logikk på nytt useAuth, useFetch

Eksempel:

A Tabs komponenten eksponerer kontekst, slik at <Tab> barn registrerer seg automatisk – en ren applikasjon av Sammensatt komponent mønster.

36) Hva er de viktigste forskjellene mellom React 18 og React 19?

Svar:

React 19 bygger på React 18s samtidige grunnlag med betydelige nye funksjoner.

Trekk Reager 18 Reager 19
Samtidig gjengivelse introdusert Forbedret med bedre spenning
Serverkomponenter Experimental Stabilisert og integrert
Handlinger-API Ikke tilgjengelig Ny standard for håndtering av skjemahandlinger
Lasting av eiendeler Håndbok Automatisk ressursinnlasting
Forbedret feilhåndtering Basic Granulær med grensekroker

Hovedfordeler:

React 19 fokuserer på enklere datamutasjoner, innebygde skjemahandlingerog forbedret asynkron kontroll, noe som gjør SSR og progressiv hydrering mer sømløs.

37) Hvordan fungerer mikrofrontend ArchiTekturintegrasjon med React, og hva er fordelene?

Svar:

Mikro-frontend-moduler deler en stor webapp opp i uavhengige, utplasserbare frontend-moduler. I et React-økosystem er hver mikro-frontend en frittstående app som kan integreres via Modulføderasjon, iframeseller tilpassede kjøretidslastere.

Fordeler:

  • Uavhengig distribusjon og skalering.
  • Teamautonomi på tvers av teknologiske stabler.
  • Raskere bygging av rørledninger.

Eksempel:

Ved hjelp av Webpack Module Federation, kan team eksponere React-komponenter på tvers av apper dynamisk:

exposes: { './NavBar': './src/NavBar' }

Ulemper:

  • Delt tilstandsstyringskompleksitet.
  • Ytelseskostnader fra isolerte pakker.

38) Hvilke faktorer vurderer du når du skalerer en React-applikasjon i produksjon?

Svar:

Skalering av React-applikasjoner innebærer tekniske, arkitektoniske og driftsmessige hensyn.

Nøkkel faktorer:

  1. Kodestruktur — ta i bruk monoreposer (Nx/Turborepo) for modulær kodedeling.
  2. Statlig ledelse — segmenter lokale vs. globale vs. servertilstander.
  3. Ytelse — lat lasting, memoisering, CDN-caching.
  4. Overvåking – bruk Sentry, Datadog eller LogRocket for feil og målinger.
  5. Testing og CI/CD — automatiserte pipelines og visuelle regresjonstester.

Eksempel:

En stor e-handelsplattform skalerer React-apper ved hjelp av Next.js for SSR, Redux Toolkit for forutsigbar tilstand og mikrogrensesnitt for isolerte vertikaler.

39) Hvordan tester man React-komponenter som bruker asynkron oppførsel?

Svar:

Testing av asynkrone React-komponenter krever synkronisering mellom testkjøreren og komponentens tilstandsoppdateringer.

Beste praksis:

  • Bruk waitFor or findBy* spørringer i React Testing Library.
  • Mock hentekall eller API-er ved bruk av msw.
  • Kjøp helst falske tidtakere (jest.useFakeTimers()) for timeout-baserte effekter.

Eksempel:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Dette sikrer at testen venter på Reacts asynkrone oppdateringer før den foretar påstander.

40) Forklar hvordan du ville utforme en storskala, vedlikeholdbar React-prosjektstruktur.

Svar:

Et skalerbart React-prosjekt må balansere modularitet, klarhet og teamsamarbeid.

Anbefalt 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

Beste praksis:

  • Bruk absolutte importer med sti-aliaser.
  • Oppretthold streng loing (ESLint + Prettier).
  • Bruk TypeScript for typesikkerhet.
  • Håndhev komponentgrenser med atomdesign eller funksjonsbasert slicing.

Eksempel:

I et virkelig oppsett kan en «Bruker»-funksjon inkludere UserSlice.js, UserAPI.js, UserCard.jsxog User.test.js, alt innenfor src/features/user/.

🔍 De beste intervjuspørsmålene for React.js med virkelige scenarioer og strategiske svar

1) Hva er de viktigste forskjellene mellom funksjonelle komponenter og klassekomponenter i React.js?

Forventet fra kandidaten: Intervjueren ønsker å teste din forståelse av React-komponentarkitektur og moderne beste praksis.

Eksempel på svar:

«Funksjonelle komponenter er enklere og er avhengige av kroker for å administrere tilstands- og livssyklusmetoder, mens klassekomponenter bruker this og livssyklusmetoder som componentDidMountFunksjonelle komponenter er generelt foretrukket i dag fordi de fremmer renere kode, er enklere å teste og yter bedre på grunn av optimaliseringer i Reacts gjengivelsesprosess.

2) Kan du forklare hvordan den virtuelle DOM-en fungerer i React?

Forventet fra kandidaten: Intervjueren ønsker å evaluere din forståelse av Reacts kjernemekanisme for ytelse.

Eksempel på svar:

«Den virtuelle DOM-en er en representasjon i minnet av den virkelige DOM-en. Når en komponents tilstand endres, oppdaterer React først den virtuelle DOM-en, sammenligner den med den forrige versjonen ved hjelp av en prosess som kalles 'diffing', og oppdaterer deretter bare de delene av den virkelige DOM-en som har endret seg. Denne tilnærmingen forbedrer ytelsen ved å minimere direkte DOM-manipulasjon.»

3) Hvordan håndterer du tilstand i en storskala React-applikasjon?

Forventet fra kandidaten: Intervjueren ønsker å vite om din erfaring med teknikker og verktøy for statlig styring.

Eksempel på svar:

«I store applikasjoner bruker jeg vanligvis sentraliserte tilstandsadministrasjonsbiblioteker som Redux eller Zustand. Redux gir en forutsigbar dataflyt og gjør feilsøking enklere gjennom tidsreise-feilsøkingsverktøy. For enklere applikasjoner foretrekker jeg å bruke Context API og hooks for å unngå unødvendig kompleksitet.»

4) Beskriv et tidspunkt da du optimaliserte React-ytelsen.

Forventet fra kandidaten: Intervjueren ønsker å forstå din praktiske erfaring med ytelsesoptimalisering.

Eksempel på svar:

«I min forrige rolle ble applikasjonen vår gjengitt for mye på nytt på grunn av unødvendige tilstandsendringer. Jeg brukte React.memo og useCallback hook for å forhindre unødvendige gjengivelser. Jeg analyserte også ytelsen ved hjelp av React Profiler og identifiserte komponenter som trengte memo-isering, noe som reduserte gjengivelsestiden med nesten 30 %.

5) Hvordan håndterer du bivirkninger i React?

Forventet fra kandidaten: Intervjueren ønsker å vurdere din forståelse av kroker og livssyklushåndtering.

Eksempel på svar:

«Jeg håndterer bivirkninger som API-kall eller DOM-manipulasjoner ved hjelp av useEffect Hook. Hooken lar meg spesifisere avhengigheter, slik at effekten bare kjører når disse avhengighetene endres. Dette bidrar til å opprettholde forutsigbar oppførsel og unngå uendelige løkker.

6) Fortell meg om en utfordrende feil du møtte i et React-prosjekt og hvordan du løste den.

Forventet fra kandidaten: Intervjueren ønsker å vurdere dine problemløsnings- og feilsøkingsferdigheter.

Eksempel på svar:

«På en tidligere posisjon møtte jeg på en feil der tilstandsoppdateringer ikke ble reflektert i brukergrensesnittet. Etter å ha undersøkt dette, innså jeg at problemet skyldtes direkte mutasjon av tilstandsobjektet i stedet for å opprette en ny kopi. Jeg omstrukturerte koden for å bruke uforanderlige oppdateringer, noe som løste problemet og forbedret datakonsistensen.»

7) Hvordan håndterer du skjemavalidering i React-applikasjoner?

Forventet fra kandidaten: Intervjueren vil se om du forstår hvordan man implementerer validering av brukerinndata.

Eksempel på svar:

«Jeg bruker vanligvis kontrollerte komponenter for å administrere skjemainndata, kombinert med biblioteker som Formik eller React Hook Form for validering. Disse verktøyene forenkler håndtering av feil, administrasjon av skjemastatus og integrering med tredjeparts valideringsbiblioteker som Yup.»

8) Beskriv en situasjon der du måtte samarbeide med backend-utviklere mens du jobbet med et React-prosjekt.

Forventet fra kandidaten: Intervjueren ønsker å evaluere dine samarbeids- og kommunikasjonsevner.

Eksempel på svar:

«I min forrige rolle samarbeidet jeg tett med backend-utviklere for å designe REST API-er for en dashbordapplikasjon. Vi ble enige om dataformater og endepunkter i tidlige utviklingsfaser. Jeg laget også mock-responser for å fortsette frontend-utviklingen mens backend-applikasjonen ble bygget, noe som sikret en smidig integrasjon senere.»

9) Hvordan sikrer du at React-komponentene dine er gjenbrukbare og vedlikeholdbare?

Forventet fra kandidaten: Intervjueren vil vite om din tilnærming til komponentdesign og skalerbarhet.

Eksempel på svar:

«Jeg følger prinsippet om å bygge små, fokuserte komponenter som håndterer ett ansvar. Jeg bruker også rekvisitter for fleksibilitet, og jeg fortsetter å style modulært med CSS-i-JS eller styled-components. Dette sikrer at komponenter enkelt kan gjenbrukes og vedlikeholdes på tvers av prosjektet.»

10) Hvordan holder du deg oppdatert på React.js-trender og beste praksis?

Forventet fra kandidaten: Intervjueren ønsker å evaluere din forpliktelse til kontinuerlig læring.

Eksempel på svar:

«Jeg holder meg oppdatert ved å følge Reacts offisielle dokumentasjon og fellesskapsblogger. Jeg ser også foredrag fra React-konferanser som React Conf og lytter til podkaster som «React Podcast». Disse ressursene hjelper meg å holde meg informert om nye funksjoner som samtidig rendering og serverkomponenter.»

Oppsummer dette innlegget med: