React HooksExplained

24 of 24 rows

Hook↕	Mit tesz↕	Mire használd↕
Állapot
⤢useState	Egyetlen értéket tárol, amely megváltozásakor újrarenderelés következik.	Helyi komponens-state: űrlapmezők, kapcsolók, számlálók.
⤢useReducer	Action-reducer vezérelte state-et tárol, mint egy kis store.	Több összefüggő mezőből álló vagy összetett átmenetű state.
⤢useRef	Módosítható értéket tárol, amely NEM vált ki újrarenderelést.	Módosítható tárolók, timerek és közvetlen DOM-elérés a .current-on keresztül.
Effektek
⤢useEffect	Mellékhatást futtat a render után, opcionális cleanupmal.	Adatok lekérése, feliratkozások és szinkronizálás külső rendszerrel.
⤢Effect cleanup	Az a függvény, amelyet az effekt visszaad, a következő effekt előtt és unmountkor fut le.	Feliratkozások és timerek lebontása, vagy futó lekérés megszakítása.
⤢useLayoutEffect	Mint a useEffect, de szinkronban fut a DOM-módosítás után.	Layout olvasása vagy írása, mielőtt a böngésző fest (toastok, tooltipok).
⤢useEffect vs handlers	Az eseménykezelők felhasználói műveletre futnak; az effektek a render után futnak, szinkronizálás céljából.	A felhasználó által okozott logika a kezelőbe való, a render által okozott logika az effektbe.
⤢StrictMode	Fejlesztésben kétszer mountolja a komponenseket, így az effektek lefutnak, kitakarítanak, majd újra lefutnak.	Dupla feliratkozások és hiányzó cleanup észrevétele még production előtt.
Teljesítmény
⤢useMemo	Kiszámolt értéket gyorsítótáraz, amíg a függőségei nem változnak.	Drága újraszámolások elkerülése renderek között; szándékosan változtass meg egy értéket a függőségekben a gyorsítótár törléséhez.
⤢useCallback	Függvényhivatkozást gyorsítótáraz, amíg a függőségei nem változnak.	Stabil callbackek memoizált gyerekeknek, vagy függőségként való használathoz.
⤢React.memo	Kihagyja egy komponens újrarenderelését, ha a propjai nem változnak.	Nehéz gyerekkomponensek; adj meg összehasonlító függvényt második argumentumként, ha a felületes egyenlőség nem elég (HOC, nem hook).
Context és külső handle-ök
⤢useContext	Beolvassa a context értékét prop-drilling nélkül.	Téma, locale vagy hitelesített felhasználó megosztása a fában.
⤢useImperativeHandle	Testreszabja azt a példányt, amelyet a szülő a refen keresztül lát.	Szűk API kiadása egy gyerekből forwardRef segítségével.
Konkurencia és egyéb
⤢useTransition	Nem sürgősként jelöli meg a state-frissítést, hogy a UI reszponzív maradjon.	A bevitel fürgén tartása, miközben egy nehéz lista újrarenderel.
⤢useDeferredValue	Elhalaszt egy értéket, hogy a frissítések megszakíthatók legyenek.	Drága renderek debounce-olása timerek nélkül.
⤢useId	Stabil, egyedi azonosítót generál az akadálymentesítési attribútumokhoz.	Címke és beviteli mező összekapcsolása szerver- és kliensoldali renderben.
⤢use()	Promise-t vagy contextet olvas render közben; az egyetlen hook, amely feltételesen hívható.	Promise kicsomagolása Suspense-szel, vagy context olvasása egy korai returnban.
⤢useActionState	Form action vezérelte state-et tárol, beépített pending jelzővel.	Beküldések, amelyek hibákat vagy frissített state-et adnak vissza inline megjelenítéshez.
⤢useOptimistic	Azonnal optimista értéket renderel, majd visszaesik a valódi state-re, amikor az action befejeződik.	Like vagy elküldött üzenet megjelenítése, miközben a szerverkérés folyamatban van.
⤢useFormStatus	Kiolvassa a körbezáró <form> pending állapotát, propok nélkül.	Beküldő gomb, amely saját magát tiltja le, miközben a szülő formja beküld.
⤢useSyncExternalStore	Feliratkozik a Reacten kívüli store-ra, és egy konzisztens pillanatképet olvas.	Böngésző-API-k, mint az online állapot, vagy külső state-store-ok.
⤢useInsertionEffect	A layout-effektek előtt fut, CSS-in-JS szabályok beszúrásához készült.	Stíluskönyvtárak, amelyeknek a szabályokat a layout olvasása előtt be kell szúrniuk.
⤢useDebugValue	Egyéni címkét mutat egy hook belső state-jére a React DevToolsban.	Annak címkézése, hogy egy custom hook mit tárol, hibakeresés közben.
⤢Custom hooks (use*)	Saját hook, amely a beépítetteket komponálja össze a logika megosztásához.	Újrafelhasználható, state-t kezelő viselkedés, mint a useFetch vagy useMediaQuery.