React-hooksExplained

24 of 24 rows

Hook↕	Hvad den gør↕	Hvad du bruger den til↕
State
⤢useState	Holder en enkelt værdi, der udløser et re-render, når den ændres.	Lokal komponentstate: formularfelter, toggles, tællere.
⤢useReducer	Holder state styret af en action-reducer, som en lille store.	State med flere relaterede felter eller komplekse overgange.
⤢useRef	Holder en mutable værdi, der IKKE udløser et re-render.	Mutable containere, timere og direkte DOM-adgang via .current.
Effekter
⤢useEffect	Kører en sideeffekt efter render, med valgfri oprydning.	Hente data, abonnementer og synkronisering med et eksternt system.
⤢Effect cleanup	Funktionen, som en effekt returnerer, kører før den næste effekt og igen ved unmount.	Rive abonnementer og timere ned eller afbryde en igangværende fetch.
⤢useLayoutEffect	Som useEffect, men affyres synkront efter DOM-mutation.	Læse eller skrive layout, før browseren tegner (toasts, tooltips).
⤢useEffect vs handlers	Eventhandlere kører som svar på en brugerhandling; effekter kører efter render for at synkronisere.	Brugerforårsaget logik hører hjemme i en handler, render-forårsaget logik i en effekt.
⤢StrictMode	I udvikling monteres komponenter to gange, så effekter kører, rydder op og kører igen.	Fange dobbelte abonnementer og manglende oprydning før produktion.
Ydeevne
⤢useMemo	Cacher en beregnet værdi, indtil dens dependencies ændres.	Undgå dyre genberegninger på tværs af renders; ændr bevidst en værdi i deps for at tømme cachen.
⤢useCallback	Cacher en funktionsreference, indtil dens dependencies ændres.	Stabile callbacks, der sendes til memoizerede children eller bruges som deps.
⤢React.memo	Springer re-render af en komponent over, hvis props er uændrede.	Tunge childkomponenter; giv en sammenligningsfunktion som andet argument, når overfladisk lighed ikke er nok (en HOC, ikke en hook).
Context og eksterne handles
⤢useContext	Læser en contextværdi uden prop drilling.	Tema, locale eller en auth-bruger delt i hele træet.
⤢useImperativeHandle	Tilpasser den instans, en forælder ser gennem en ref.	Exponere et fokuseret API fra et child via forwardRef.
Concurrency og andet
⤢useTransition	Markerer et state-update som ikke-presserende, så brugerfladen forbliver responsiv.	Holde inputtet hurtigt, mens en tung liste re-renderer.
⤢useDeferredValue	Udsætter en værdi, så updates kan afbrydes.	Debounce af dyre renders uden timere.
⤢useId	Genererer et stabilt, unikt id til accessibilityattributter.	Sammenkæde label og input på tværs af server- og clientrenders.
⤢use()	Læser et promise eller en context under render; den eneste hook, du kan kalde betinget.	Pakke et promise ud med Suspense eller læse context i en tidlig return.
⤢useActionState	Holder state styret af en formularaction, med et pending-flag inkluderet.	Formularsubmits, der returnerer fejl eller opdateret state til inline-visning.
⤢useOptimistic	Renderer en optimistisk værdi med det samme og falder tilbage til rigtig state, når handlingen er afsluttet.	Vise et like eller en sendt besked, mens dens serveranmodning er i gang.
⤢useFormStatus	Læser pending-tilstanden af den omgivende <form>, uden props.	En submitknap, der deaktiverer sig selv, mens dens overordnede formular sender.
⤢useSyncExternalStore	Abonnerer på en store uden for React og læser ét konsistent snapshot.	Browser-API'er som online-status eller tredjeparts state-stores.
⤢useInsertionEffect	Kører før layouteffekter, lavet til at injicere CSS-in-JS-regler.	Stylebiblioteker, der skal indsætte regler, før layout læses.
⤢useDebugValue	Viser et eget label for en hooks interne state i React DevTools.	Mærke, hvad en custom hook indeholder, under debugging.
⤢Custom hooks (use*)	Din egen hook, der komponerer de indbyggede for at dele logik.	Genanvendelig statefuld adfærd som useFetch eller useMediaQuery.