React-hooksExplained

24 of 24 rows

Hook↕	Hva den gjør↕	Bruk den til↕
State
⤢useState	Holder én verdi som utløser et nytt render når den endres.	Lokal komponentstate: skjemafelter, brytere, tellere.
⤢useReducer	Holder state drevet av en reducer for handlinger, som en liten butikk.	State med flere beslektede felter eller komplekse overganger.
⤢useRef	Holder en muterbar verdi som IKKE utløser et nytt render.	Muterbare beholdere, timere og direkte DOM-tilgang via .current.
Effekter
⤢useEffect	Kjører en bivirkning etter render, med valgfri opprydding.	Henting av data, abonnementer og synkronisering mot et eksternt system.
⤢Effect cleanup	Funksjonen en effekt returnerer, kjører før neste effekt og igjen ved avmontering.	Nedrigging av abonnementer og timere, eller avbryting av en pågående henting.
⤢useLayoutEffect	Som useEffect, men fyres av synkront etter DOM-endring.	Lese eller skrive layout før nettleseren tegner (toasts, verktøytips).
⤢useEffect vs handlers	Hendelsesbehandlere kjører som svar på en brukerhandling; effekter kjører etter render for å synkronisere.	Brukerdrevet logikk hører hjemme i en behandler, renderdrevet logikk i en effekt.
⤢StrictMode	I utvikling monteres komponenter to ganger, slik at effekter kjører, rydder opp og kjører igjen.	Avslører dobbelte abonnementer og manglende opprydding før produksjon.
Ytelse
⤢useMemo	Mellomlagrer en beregnet verdi til avhengighetene endres.	Unngå dyre omregninger på tvers av render; endre en verdi i avhengighetene med vilje for å tømme cachen.
⤢useCallback	Mellomlagrer en funksjonsreferanse til avhengighetene endres.	Stabile callbacks som sendes til memoiserte barn eller brukes som avhengigheter.
⤢React.memo	Hopper over re-render av en komponent hvis props er uendret.	Tunge barnkomponenter; send en sammenligningsfunksjon som andre argument når grunn likhet ikke er nok (en HOC, ikke en hook).
Kontekst og eksterne håndtak
⤢useContext	Leser en kontekstverdi uten prop-drilling.	Tema, locale eller en innlogget bruker delt gjennom treet.
⤢useImperativeHandle	Tilpasser instansen en forelder ser gjennom en ref.	Eksponere et avgrenset API fra et barn via forwardRef.
Samtidighet og annet
⤢useTransition	Markerer en state-oppdatering som ikke-haster, slik at brukergrensesnittet holder seg responsivt.	Holde inndata rask mens en tung liste re-renderes.
⤢useDeferredValue	Utsetter en verdi slik at oppdateringer kan avbrytes.	Debounce av dyre renders uten timere.
⤢useId	Genererer en stabil, unik id for tilgjengelighetsattributter.	Koble label og input sammen på tvers av server- og klient-render.
⤢use()	Leser et promise eller en kontekst under render; den eneste hooken du kan kalle betinget.	Pakke ut et promise med Suspense, eller lese kontekst inne i en tidlig retur.
⤢useActionState	Holder state drevet av en skjemahandling, med pending-flagg inkludert.	Skjemainnsendinger som returnerer feil eller oppdatert state som vises inline.
⤢useOptimistic	Renderer en optimistisk verdi med én gang, og faller tilbake til ekte state når handlingen er ferdig.	Vise en like eller en sendt melding mens serverforespørselen pågår.
⤢useFormStatus	Leser pending-tilstanden til det omsluttende <form>, uten props.	En send-knapp som deaktiverer seg mens det overordnede skjemaet sender.
⤢useSyncExternalStore	Abonnerer på en butikk utenfor React og leser ett konsistent øyeblikksbilde.	Nettleser-API-er som nettstatus, eller tredjeparts state-butikker.
⤢useInsertionEffect	Kjører før layouteffekter, laget for å injisere CSS-in-JS-regler.	Stilbiblioteker som må sette inn regler før layout leses.
⤢useDebugValue	Viser en egendefinert etikett for en hooks interne state i React DevTools.	Å merke hva en egendefinert hook inneholder under feilsøking.
⤢Custom hooks (use*)	Din egen hook som komponerer de innebygde for å dele logikk.	Gjenbrukbar statefull atferd som useFetch eller useMediaQuery.