Hooki ReactExplained

24 of 24 rows

Hook↕	Co robi↕	Do czego go użyć↕
Stan
⤢useState	Przechowuje pojedynczą wartość, której zmiana wywołuje ponowny render.	Lokalny stan komponentu: pola formularza, przełączniki, liczniki.
⤢useReducer	Przechowuje stan sterowany reduktorem akcji, jak mały store.	Stan z kilkoma powiązanymi polami lub ze złożonymi przejściami.
⤢useRef	Przechowuje mutowalną wartość, która NIE wywołuje ponownego renderu.	Mutowalne kontenery, timery i bezpośredni dostęp do DOM przez .current.
Efekty
⤢useEffect	Uruchamia efekt uboczny po renderze, z opcjonalnym sprzątaniem.	Pobieranie danych, subskrypcje i synchronizacja z systemem zewnętrznym.
⤢Effect cleanup	Funkcja zwrócona przez efekt uruchamia się przed następnym efektem i ponownie przy odmontowaniu.	Zrywanie subskrypcji i timerów albo przerywanie trwającego fetcha.
⤢useLayoutEffect	Jak useEffect, ale odpala się synchronicznie po mutacji DOM.	Czytanie lub pisanie layoutu, zanim przeglądarka odmaluje (toasty, tooltipsy).
⤢useEffect vs handlers	Handlery zdarzeń uruchamiają się w odpowiedzi na akcję użytkownika; efekty — po renderze, żeby zsynchronizować.	Logika wywołana przez użytkownika należy do handlera, logika wywołana renderem — do efektu.
⤢StrictMode	W trybie deweloperskim montuje komponenty dwukrotnie, żeby efekty się uruchomiły, posprzątały i uruchomiły ponownie.	Wyłapywanie podwójnych subskrypcji i brakującego sprzątania przed produkcją.
Wydajność
⤢useMemo	Buforuje obliczoną wartość do zmiany zależności.	Unikanie kosztownych przeliczeń między renderami; zmień celowo wartość w zależnościach, aby unieważnić cache.
⤢useCallback	Buforuje referencję funkcji do zmiany zależności.	Stabilne callbacki przekazywane do memoizowanych dzieci lub używane jako zależności.
⤢React.memo	Pomija ponowny render komponentu, którego propsy się nie zmieniły.	Ciężkie komponenty dzieci; przekaż funkcję porównującą jako drugi argument, gdy płytka równość nie wystarcza (HOC, nie hook).
Kontekst i uchwyty zewnętrzne
⤢useContext	Czyta wartość kontekstu bez prop drillingu.	Motyw, locale lub zalogowany użytkownik współdzielone w drzewie.
⤢useImperativeHandle	Dostosowuje instancję, którą rodzic widzi przez ref.	Udostępnienie wąskiego API z dziecka przez forwardRef.
Współbieżność i inne
⤢useTransition	Oznacza aktualizację stanu jako niepilną, żeby interfejs pozostał responsywny.	Sprawne wpisywanie podczas ponownego renderu ciężkiej listy.
⤢useDeferredValue	Odracza wartość, żeby aktualizacje dało się przerwać.	Debouncing kosztownych renderów bez timerów.
⤢useId	Generuje stabilny, unikalny id dla atrybutów dostępności.	Łączenie label i input między renderem serwera a klienta.
⤢use()	Czyta promise lub kontekst podczas renderu; jedyny hook, który można wywołać warunkowo.	Rozpakowanie promise'a z Suspense albo czytanie kontekstu we wczesnym returnie.
⤢useActionState	Przechowuje stan sterowany akcją formularza, z dołączoną flagą pending.	Wysłania formularzy, które zwracają błędy lub zaktualizowany stan do pokazania inline.
⤢useOptimistic	Renderuje od razu wartość optymistyczną, a gdy akcja się zakończy, wraca do prawdziwego stanu.	Pokazanie lajka lub wysłanej wiadomości, gdy żądanie do serwera jest w toku.
⤢useFormStatus	Czyta stan pending otaczającego <form>, bez propsów.	Przycisk wysyłania, który wyłącza się, gdy nadrzędny formularz się wysyła.
⤢useSyncExternalStore	Subskrybuje store spoza Reacta i czyta jeden spójny snapshot.	API przeglądarki jak status online albo zewnętrzne store'y stanu.
⤢useInsertionEffect	Uruchamia się przed efektami layoutu, stworzony do wstrzykiwania reguł CSS-in-JS.	Biblioteki stylów, które muszą wstawić reguły przed odczytem layoutu.
⤢useDebugValue	Pokazuje własną etykietę wewnętrznego stanu hooka w React DevTools.	Etykietowanie tego, co trzyma własny hook, podczas debugowania.
⤢Custom hooks (use*)	Twój własny hook, który łączy wbudowane hooki, by współdzielić logikę.	Wielokrotnego użytku logika ze stanem, jak useFetch czy useMediaQuery.