React hooky pro každodenní práci, seskupené podle úkolu: držet stav, spouštět efekty, memoizovat práci, sdílet context a sahat mimo render. Každý řádek páruje hook s tím, k čemu slouží.
Hook je funkce, která umožňuje funkční komponentě využívat funkce Reactu: stav, životní cyklus, context a ladění výkonu. Dvě pravidla: hooky volej na nejvyšší úrovni (nikdy uvnitř cyklů ani podmínek) a volej je jen z Reactových funkcí. Ve zbytku jde o výběr správného hooku k danému úkolu.
Referenční tabulka · 24 položek
React hookyExplained
24 of 24 rows
Stav
Drží jedinou hodnotu, jejíž změna vyvolá přerenderování.
Lokální stav komponenty: pole formulářů, přepínače, počítadla.
Drží stav řízený reducerem akcí, jako malý store.
Stav s několika souvisejícími poli nebo složitými přechody.
Drží měnitelnou hodnotu, která NEVYVOLÁ přerenderování.
Měnitelné kontejnery, časovače a přímý přístup k DOM přes .current.
Efekty
Spustí vedlejší efekt po renderu, s volitelným úklidem.
Načítání dat, odběry a synchronizace s externím systémem.
Funkce, kterou efekt vrátí, se spustí před dalším efektem a znovu při odmontování.
Rušení odběrů a časovačů nebo přerušení probíhajícího fetche.
Jako useEffect, ale spouští se synchronně po mutaci DOM.
Čtení nebo zápis layoutu před vykreslením prohlížečem (toasty, tooltipy).
Handlery událostí běží v reakci na akci uživatele; efekty běží po renderu kvůli synchronizaci.
Logika způsobená uživatelem patří do handleru, logika způsobená renderem do efektu.
Ve vývoji montuje komponenty dvakrát, aby efekty proběhly, uklidily se a znovu proběhly.
Odhalení dvojitých odběrů a chybějícího úklidu před produkcí.
Výkon
Kešuje vypočtenou hodnotu, dokud se nezmění její závislosti.
Vyhnutí se drahým přepočtům mezi rendery; změň záměrně hodnotu v deps, aby se keš zneplatnila.
Kešuje referenci na funkci, dokud se nezmění její závislosti.
Stabilní callbacky předávané memoizovaným potomkům nebo používané jako závislosti.
Přeskočí přerenderování komponenty, jejíž props se nezměnily.
Těžké podřízené komponenty; předej porovnávací funkci jako druhý argument, když nestačí povrchní rovnost (HOC, ne hook).
Context a externí handles
Přečte hodnotu contextu bez prop drillingu.
Motiv, locale nebo přihlášený uživatel sdílený napříč stromem.
Přizpůsobí instanci, kterou rodič vidí přes ref.
Vystavení úzkého API z potomka přes forwardRef.
Souběžnost a další
Označí aktualizaci stavu jako ne naléhavou, aby UI zůstalo responzivní.
Udržení svižného vstupu, zatímco se přerenderovává těžký seznam.
Odkládá hodnotu, aby šly aktualizace přerušit.
Debounce drahých renderů bez časovačů.
Vygeneruje stabilní jedinečné id pro atributy přístupnosti.
Propojení labelu a inputu napříč serverovým a klientským renderem.
Přečte promise nebo context během renderu; jediný hook, který lze volat podmíněně.
Rozbalení promise se Suspense nebo čtení contextu uvnitř časného returnu.
Drží stav řízený akcí formuláře, včetně příznaku pending.
Odeslání formulářů, která vracejí chyby nebo aktualizovaný stav k zobrazení přímo v komponentě.
Vykreslí optimistickou hodnotu okamžitě a po dokončení akce se vrátí ke skutečnému stavu.
Zobrazení lajku nebo odeslané zprávy, zatímco její požadavek na server probíhá.
Přečte pending stav okolního <form>, bez props.
Tlačítko odeslání, které se samo deaktivuje, zatímco nadřazený formulář odesílá.
Přihlásí se k odběru store mimo React a přečte jeden konzistentní snapshot.
API prohlížeče jako online stav nebo stavové story třetích stran.
Běží před layoutovými efekty, vytvořený pro injektování pravidel CSS-in-JS.
Knihovny stylů, které musí vložit pravidla dřív, než se čte layout.
Zobrazí vlastní popisek vnitřního stavu hooku v React DevTools.
Označení, co vlastní hook drží, při ladění.
Vlastní hook, který kombinuje vestavěné, aby sdílel logiku.
Znovupoužitelné chování se stavem jako useFetch nebo useMediaQuery.