React HooksExplained

24 of 24 rows

Hook↕	Wat het doet↕	Gebruik het voor↕
State
⤢useState	Bewaart één waarde die een re-render triggert wanneer hij verandert.	Lokale component-state: formuliervelden, toggles, tellers.
⤢useReducer	Bewaart state aangedreven door een action-reducer, als een kleine store.	State met meerdere samenhangende velden of complexe overgangen.
⤢useRef	Bewaart een muteerbare waarde die NIET triggert tot een re-render.	Muteerbare containers, timers en directe DOM-toegang via .current.
Effecten
⤢useEffect	Draait een side effect na de render, met optionele cleanup.	Data ophalen, abonnementen en synchroniseren met een extern systeem.
⤢Effect cleanup	De functie die een effect teruggeeft draait vóór het volgende effect en nogmaals bij unmount.	Abonnementen en timers opruimen, of een lopende fetch annuleren.
⤢useLayoutEffect	Zoals useEffect, maar vuurt synchroon na de DOM-mutatie.	Layout lezen of schrijven voordat de browser tekent (toasts, tooltips).
⤢useEffect vs handlers	Event handlers draaien als reactie op een gebruikersactie; effecten draaien na de render om te synchroniseren.	Door de gebruiker veroorzaakte logiek hoort in een handler, door de render veroorzaakte logiek in een effect.
⤢StrictMode	Mount in development componenten twee keer, zodat effecten draaien, opruimen en opnieuw draaien.	Dubbele abonnementen en ontbrekende cleanup vóór productie opvangen.
Performance
⤢useMemo	Cache't een berekende waarde totdat de dependencies veranderen.	Durige herberekeningen over renders heen vermijden; verander een waarde in de deps bewust om de cache te busten.
⤢useCallback	Cache't een functiereferentie totdat de dependencies veranderen.	Stabiele callbacks die naar gememoiseerde children gaan of als deps dienen.
⤢React.memo	Slaat een re-render over van een component waarvan de props niet veranderd zijn.	Zware child-componenten; geef een vergelijkingsfunctie als tweede argument mee wanneer shallow equality niet volstaat (een HOC, geen hook).
Context en externe handles
⤢useContext	Leest een contextwaarde zonder prop drilling.	Theme, locale of een auth-user die door de boom gedeeld wordt.
⤢useImperativeHandle	Past de instantie aan die een parent via een ref ziet.	Een gefocuste API vanuit een child blootstellen via forwardRef.
Concurrency en overig
⤢useTransition	Markeert een state-update als niet-dringend, zodat de UI responsief blijft.	Invoer vlot houden terwijl een zware lijst opnieuw rendert.
⤢useDeferredValue	Stelt een waarde uit, zodat updates onderbroken kunnen worden.	Durige renders debouncen zonder timers.
⤢useId	Genereert een stabiele unieke id voor toegankelijkheidsattributen.	Een label en input koppelen over server- en client-renders heen.
⤢use()	Leest een promise of context tijdens de render; de enige hook die je conditioneel kunt aanroepen.	Een promise uitpakken met Suspense, of context lezen binnen een vroege return.
⤢useActionState	Bewaart state aangedreven door een form action, met een pending-vlag inbegrepen.	Formulierinzendingen die fouten of bijgewerkte state teruggeven om inline te tonen.
⤢useOptimistic	Rendert meteen een optimistische waarde en valt terug op de echte state wanneer de actie afgerond is.	Een like of een verzonden bericht tonen terwijl het serververzoek loopt.
⤢useFormStatus	Leest de pending-status van het omringende <form>, zonder props.	Een submitknop die zichzelf uitschakelt terwijl het bovenliggende formulier verzendt.
⤢useSyncExternalStore	Abonneert op een store buiten React en leest één consistente snapshot.	Browser-API's zoals online-status, of state-stores van derden.
⤢useInsertionEffect	Draait vóór layout-effecten, gemaakt voor het injecteren van CSS-in-JS-regels.	Stijlbibliotheken die regels moeten invoegen voordat layout gelezen wordt.
⤢useDebugValue	Toont een eigen label voor de interne state van een hook in React DevTools.	Labelen wat een custom hook vasthoudt tijdens het debuggen.
⤢Custom hooks (use*)	Je eigen hook die de ingebouwde hooks composeert om logiek te delen.	Hergebruikbaar stateful gedrag zoals useFetch of useMediaQuery.