60 React-sollicitatievragen met korte, juiste antwoorden en code: basis, hooks, state, rendering en performance, patterns, Server Components en React 19, en testen. Filter op onderwerp en niveau.
Deze 60 React-sollicitatievragen behandelen wat er in gesprekken het vaakst gevraagd wordt: JSX, props en state, hooks zoals useState en useEffect, keys, rendering en memo, context, error boundaries, Server Components en nieuwe onderdelen van React 19 zoals useActionState. Elke vraag heeft een kort antwoord in gewone taal, vaak met code, en u kunt filteren op onderwerp en niveau.
Hoe de vragen verdeeld zijn
Gebruik de filters om één onderwerp te oefenen, open een antwoord pas nadat u het uwe hardop hebt gezegd, en lees de codevoorbeelden als het soort code dat een interviewer u ter plekke kan laten schrijven.
State en props, hooks (vooral useEffect en de dependency array), keys in lijsten, opnieuw renderen en memoisatie, context en het ophalen van data. Bij senior functies komen daar performance profiling, architectuur en Server Components bij.
Steeds minder. Nieuwe code gebruikt function components en hooks. Het helpt nog wel om lifecycle methods te herkennen als u oudere code leest, en error boundaries worden nog steeds als classes geschreven.
Bouw kleine dingen vanaf nul: een todo-lijst, een zoekveld met een gedebouncete fetch, een modal met focusbeheer. Praat terwijl u codeert en test randgevallen zoals lege lijsten en fouten.
Steeds vaker, in elk geval op het niveau van ze kennen: ref als prop, actions met useActionState, useOptimistic, de use API en Server Components.
Twijfelt u over re-renders? Zie ze live geteld in
Een JavaScript-bibliotheek om gebruikersinterfaces uit componenten op te bouwen. U beschrijft hoe het scherm eruit moet zien voor de huidige data, en React werkt de pagina bij wanneer de data verandert.
Een syntax die eruitziet als HTML binnen JavaScript. Een buildstap zet elke tag om in een functieaanroep die een React-element maakt, zodat u binnen accolades elke JavaScript-expressie kunt gebruiken.
Een functie die props ontvangt en JSX teruggeeft. Namen beginnen met een hoofdletter zodat React ze kan onderscheiden van HTML-tags.
De invoer die een parent aan een child component doorgeeft, net als attributen op een HTML-tag. Een component mag zijn eigen props niet wijzigen; hij krijgt nieuwe wanneer de parent opnieuw rendert.
Props komen van de parent en zijn binnen de component alleen-lezen. State hoort bij de component zelf en verandert in de loop van de tijd via de setter, wat een re-render veroorzaakt.
Keys vertellen React welk item welk is tussen renders, zodat de juiste state en DOM-node bij elk item blijven wanneer de lijst wordt herschikt, gefilterd of aangevuld. Gebruik een stabiele id uit uw data, niet de array-index als de volgorde kan veranderen.
Met gewone JavaScript: een if vóór de return, de ternary operator binnen JSX, of && voor tonen-of-niets. Let op met && en getallen: 0 && <X /> rendert een 0.
Een wrapper die meerdere elementen groepeert zonder een DOM-node toe te voegen. Schrijf <>...</>, of <Fragment key={...}> wanneer de groep een key in een lijst nodig heeft.
Geef een functie door aan een prop in camelCase zoals onClick. React geeft een synthetisch event mee dat zich gedraagt als het browser-event. Geef de functie zelf door, niet het resultaat van de aanroep.
De beschrijving van de UI als gewone objecten die React bij elke render opbouwt. React vergelijkt de nieuwe beschrijving met de vorige en past alleen de verschillen toe op de echte DOM. Die vergelijking heet reconciliation.
Het geeft een component een stuk state en een functie om die bij te werken. De setter aanroepen plant een re-render met de nieuwe waarde; de variabele in de huidige render verandert niet.
Wanneer de volgende waarde afhangt van de vorige, vooral bij meerdere updates in één event. Elke updater krijgt de laatste waarde uit de wachtrij, terwijl setCount(count + 1) twee keer beide keren dezelfde verouderde count gebruikt.
Synchroniseren met iets buiten React na het renderen: een subscription, een timer, een widget die geen React is of een netwerkverzoek. De dependency array bepaalt wanneer het opnieuw draait, en de teruggegeven functie ruimt op.
Om waarden te berekenen uit props of state (bereken ze dan tijdens het renderen), of om op een gebruikersactie te reageren (doe het werk in de event handler). Effects zijn bedoeld om te synchroniseren met externe systemen.
Roep hooks alleen aan op het hoogste niveau van een component of custom hook, nooit binnen loops, voorwaarden of geneste functies, en alleen vanuit React-functies. React rekent erop dat de volgorde van aanroepen bij elke render gelijk is.
Om een waarde te bewaren die renders overleeft zonder er een te veroorzaken wanneer ze verandert, zoals een DOM-node, een timer-id of een vorige waarde. Lees en schrijf haar via ref.current.
useMemo cachet het resultaat van een berekening; useCallback cachet een functie. Beide geven hetzelfde terug tot een dependency verandert, en beide zijn vooral van belang bij het doorgeven van waarden aan gememoiseerde children.
Een manier om een waarde te lezen die hoger in de boom wordt aangeboden, zonder props door elk niveau te geven. Elke component die een context leest, rendert opnieuw wanneer de waarde verandert.
Wanneer meerdere waarden samen veranderen of de volgende state afhangt van een type actie, zoals bij een formulierwizard of een winkelwagen. De reducer houdt alle overgangen in één testbare functie.
Een functie waarvan de naam met use begint en die andere hooks aanroept. Hij deelt logica met state tussen componenten; elke component die hem aanroept krijgt zijn eigen state.
Het draait nadat React de DOM heeft gewijzigd maar voordat de browser tekent, zodat u de layout kunt meten en aanpassen zonder zichtbaar flikkeren. Het blokkeert het tekenen, dus gebruik het alleen daarvoor.
Om een unieke id te maken die gelijk is bij renderen op server en client, om labels, invoervelden en beschrijvingen aan elkaar te koppelen. Het is niet bedoeld voor keys in lijsten.
Gedeelde state verplaatsen naar de dichtstbijzijnde gemeenschappelijke parent van de componenten die hem nodig hebben, en hem dan als props doorgeven samen met functies om hem te wijzigen.
React bepaalt of er opnieuw gerenderd wordt door de oude en nieuwe waarde te vergelijken. Een object of array ter plekke wijzigen houdt dezelfde referentie, dus React kan de update overslaan. Maak in plaats daarvan een nieuwe kopie.
Een controlled input haalt zijn waarde uit state en meldt wijzigingen via onChange. Een uncontrolled input bewaart zijn eigen waarde in de DOM, die u uitleest met een ref of bij het verzenden van een formulier.
Een waarde die u kunt berekenen uit bestaande props of state, zoals een gefilterde lijst. Apart opslaan betekent twee kopieën synchroon houden; berekenen tijdens het renderen kan niet uit de pas lopen.
Props doorgeven via componenten die ze niet gebruiken, alleen om een diep child te bereiken. Oplossingen zijn compositie (children doorgeven), context, of een state-bibliotheek voor echt globale data.
Wanneer veel componenten ver uit elkaar dezelfde client-state lezen en bijwerken en context te veel re-renders veroorzaakt, of wanneer u tools zoals devtools en middleware nodig hebt. Serverdata wordt meestal beter afgehandeld door een data-fetching-bibliotheek die haar cachet.
In een framework met Server Components haalt u op de server op. Op de client gebruikt u een databibliotheek of een effect dat het verzoek start, laden en fouten afhandelt, en het resultaat negeert als de component is ge-unmount of de invoer is veranderd.
Nee. Updates worden in een wachtrij gezet en gebundeld; React 18 en later bundelen ook updates uit timeouts en promises, niet alleen uit event handlers. De nieuwe waarde verschijnt in de volgende render.
Zijn state verandert, zijn parent rendert opnieuw, of een context die hij leest verandert. Een re-render verandert niet altijd de DOM; React werkt alleen bij wat verschilt.
Het slaat het opnieuw renderen van een component over wanneer zijn props oppervlakkig gelijk zijn aan de vorige keer. Het loont alleen wanneer de component vaak rendert met dezelfde props en zijn render niet goedkoop is.
Een wrapper die alleen in development extra controles uitvoert: hij rendert componenten en draait effects twee keer om bijwerkingen en ontbrekende cleanup zichtbaar te maken. In productie doet hij niets.
Neem de interactie op in de React DevTools Profiler op een productiebuild, zoek componenten die vaak renderen of lang duren, en los dan de oorzaak op: verplaats state naar beneden, memoiseer, of virtualiseer lange lijsten.
Een manier om een update als niet dringend te markeren. React houdt de invoer responsief en kan de trage render onderbreken, en met isPending kunt u tonen dat er werk bezig is.
Het geeft u een kopie van een waarde die tijdens zwaar renderen achter kan lopen. Typen werkt het invoerveld direct bij terwijl de dure lijst met de uitgestelde waarde rendert.
Virtualiseer hem: render alleen de zichtbare rijen met een bibliotheek zoals react-window of TanStack Virtual. Pagineren of meer laden bij scrollen beperkt ook het aantal DOM-nodes.
Delen van de app pas laden wanneer ze nodig zijn. React.lazy met een dynamische import en een Suspense-fallback splitst een component af naar een eigen bestand.
React koppelen aan HTML die op de server is gerenderd, zodat de bestaande markup interactief wordt zonder opnieuw te worden opgebouwd. Als de client iets anders rendert, meldt React een hydration mismatch.
Een tool die tijdens de build componenten analyseert en automatisch memoisatie toevoegt, zodat veel handgeschreven useMemo, useCallback en memo overbodig wordt. Hij verwacht code die de regels van React volgt.
Componenten bouwen door andere erin te plaatsen, vaak via children of andere props. React-componenten delen gedrag via compositie en hooks, en het React-team heeft geen geval gevonden waarin overervingshiërarchieën helpen.
Alles wat u tussen de openings- en sluittag van een component zet. Daarmee kan een layout- of wrappercomponent inhoud renderen die hij niet kent.
Een functie die een component ontvangt en een nieuwe teruggeeft met extra gedrag. Custom hooks hebben het meeste gebruik vervangen, omdat ze logica delen zonder te wrappen en props te hernoemen.
Een component die fouten opvangt die tijdens het renderen van zijn children worden gegooid en een fallback toont in plaats van een lege pagina. Hij wordt nog steeds geschreven als class met getDerivedStateFromError, of met een kleine bibliotheek.
Children renderen in een andere DOM-node, zoals document.body, met createPortal. Het wordt gebruikt voor modals en tooltips die moeten ontsnappen aan de overflow of stacking van een parent.
In React 19 accepteren function components ref als gewone prop. In eerdere versies wrapt u het child in forwardRef. Gebruik useImperativeHandle om alleen bepaalde methods beschikbaar te maken.
Een groep componenten die samenwerken en state delen via context, zoals Tabs met Tabs.List en Tabs.Panel. De gebruiker schikt de onderdelen terwijl de parent de logica beheert.
Componenten die alleen op de server draaien en hun gerenderde resultaat naar de browser sturen, niet hun code. Ze kunnen data direct lezen; interactieve delen komen in Client Components die gemarkeerd zijn met "use client".
Het markeert een bestand als het begin van clientcode: die module en wat ze importeert worden gebundeld voor de browser en kunnen state, effects en event handlers gebruiken.
Async functies die op de server draaien maar vanuit de client kunnen worden aangeroepen, meestal als form action. Behandel elk ervan als een publiek endpoint: valideer invoer en controleer rechten.
Het wrapt een action-functie en geeft het laatste resultaat terug, een gewrapte action om aan een formulier door te geven, en een pending-vlag. Het is de manier van React 19 om feedback bij formulieren te tonen.
Een API van React 19 die tijdens het renderen de waarde van een promise of een context leest. Anders dan hooks mag hij binnen voorwaarden worden aangeroepen; met een promise schort hij op tot de waarde klaar is.
Het toont meteen het verwachte resultaat van een action, zoals een nieuwe reactie, terwijl het verzoek nog loopt, en gaat dan over op het echte resultaat wanneer dat terugkomt.
Een component die een fallback toont terwijl iets erbinnen nog niet klaar is, zoals lazy geladen code of data in een framework dat dat ondersteunt. Met server rendering laat het delen van de pagina later binnenstromen.
Render hem met React Testing Library in een testrunner zoals Vitest of Jest, werk ermee zoals een gebruiker dat zou doen (klikken, typen), en controleer wat zichtbaar is, niet de interne state.
Queries zoals getByRole("button", { name: "Save" }) vinden elementen zoals hulptechnologie dat doet, zodat tests ook controleren of de UI toegankelijk is en wijzigingen in de markup overleven.
De React-documentatie raadt aan om voor volledige apps te beginnen met een framework zoals Next.js of React Router. Voor een app die alleen op de client draait, is Vite een veelgebruikte buildtool.
Gebruik semantische HTML-elementen, geef elk invoerveld een label, beheer de focus in dialogen, houd alles wat klikbaar is bereikbaar met het toetsenbord, en test met een schermlezer en een automatische checker.
Lever echte HTML voor elke URL via server rendering, statische generatie of prerendering, geef elke route een eigen title en meta description, en zet de URL's in een sitemap.
Juiste keys in lijsten, effects met volledige dependencies en cleanup, geen state die afgeleid kan worden, toegankelijke markup, fout- en laadstatussen, en geen geheimen in clientcode.
Alle
Junior
Medior
Senior
Onderwerp
Niveau
Zoeken
effect, key, memo...
{shown} van {total} vragen
Gratis beginnen · Geen creditcard nodig