React-hooksExplained

24 of 24 rows

Hook↕	Vad den gör↕	Använd den till↕
State
⤢useState	Håller ett enda värde som triggar en omrendering när det ändras.	Lokalt komponent-state: formulärfält, toggle:ar, räknare.
⤢useReducer	Håller state som drivs av en action-reducer, som en liten store.	State med flera relaterade fält eller komplexa övergångar.
⤢useRef	Håller ett föränderligt värde som INTE triggar en omrendering.	Föränderliga behållare, timers och direkt DOM-åtkomst via .current.
Effekter
⤢useEffect	Kör en bieffekt efter renderingen, med valfri städning.	Hämtning av data, prenumererationer och synkronisering mot ett externt system.
⤢Effect cleanup	Funktionen som en effekt returnerar körs före nästa effekt och igen vid avmontering.	Nedrivning av prenumererationer och timers, eller avbrott av en pågående hämtning.
⤢useLayoutEffect	Som useEffect, men avfyras synkront efter DOM-ändringen.	Läsa eller skriva layout innan webbläsaren ritar (toasts, tooltips).
⤢useEffect vs handlers	Eventhanterare körs som svar på en användarhandling; effekter körs efter renderingen för att synka.	Användarorsakad logik hör hemma i en hanterare, renderorsakad logik i en effekt.
⤢StrictMode	I utvecklingsläge monteras komponenter två gånger så att effekter körs, städar upp och körs igen.	Fångar dubbla prenumererationer och saknad städning innan produktion.
Prestanda
⤢useMemo	Cachelagrar ett beräknat värde tills beroendena ändras.	Undvika dyra omberäkningar över renderingar; ändra ett värde i beroendena med vilja för att rensa cachen.
⤢useCallback	Cachelagrar en funktionsreferens tills beroendena ändras.	Stabila callbacks som skickas till memoiserade barn eller används som beroenden.
⤢React.memo	Hoppar över omrendering av en komponent vars props är oförändrade.	Tunga barnkomponenter; skicka med en jämförelsefunktion som andra argument när ytlig likhet inte räcker (en HOC, inte en hook).
Kontext och externa handtag
⤢useContext	Läser ett kontextvärde utan prop-drilling.	Tema, locale eller en inloggad användare som delas genom trädet.
⤢useImperativeHandle	Anpassar instansen en förälder ser genom en ref.	Exponera ett fokuserat API från ett barn via forwardRef.
Samtidighet och övrigt
⤢useTransition	Markerar en state-uppdatering som icke-brådskande så att gränssnittet förblir responsivt.	Hålla inmatningen kvick medan en tung lista omrenderas.
⤢useDeferredValue	Skjuter upp ett värde så att uppdateringar kan avbrytas.	Debounce av dyra renderingar utan timers.
⤢useId	Genererar ett stabilt unikt id för tillgänglighetsattribut.	Koppla ihop label och input över server- och klientrenderingen.
⤢use()	Läser ett promise eller en kontext under renderingen; den enda hook du kan anropa villkorligt.	Packa upp ett promise med Suspense, eller läsa kontext inuti en tidig return.
⤢useActionState	Håller state som drivs av en formulärhandling, med en pending-flagga inkluderad.	Formulärskick som returnerar fel eller uppdaterad state att visa inline.
⤢useOptimistic	Renderar ett optimistiskt värde på en gång och faller tillbaka på riktigt state när handlingen är klar.	Visa en like eller ett skickat meddelande medan serverförfrågan pågår.
⤢useFormStatus	Läser pending-tillståndet för det omslutande <form>, utan props.	En skicka-knapp som avaktiverar sig medan dess överordnade formulär skickas.
⤢useSyncExternalStore	Prenumererar på en store utanför React och läser ett konsekvent ögonblicksvärde.	Webbläsar-API:er som online-status, eller tredjeparts state-stores.
⤢useInsertionEffect	Körs före layouteffekter, gjort för att injicera CSS-in-JS-regler.	Stilbibliotek som måste infoga regler innan layout läses.
⤢useDebugValue	Visar en egen etikett för en hooks interna state i React DevTools.	Etikettera vad en egen hook innehåller vid felsökning.
⤢Custom hooks (use*)	Din egen hook som komponerar de inbyggda för att dela logik.	Återanvändbart state-beteende som useFetch eller useMediaQuery.