Wbudowane hooki reactowe

Hooki stanu

Stan pozwala komponentowi “pamiętać” informacje, np. dane wprowadzone przez użytkownika. Przykładowo, komponent formularza może przechowywać w stanie wartości pól formularza, a komponent galerii zdjęć może pamiętać pozycję aktualnie zaznaczonego elementu.

Aby dodać stan do komponentu, użyj jednego z tych hooków:

• useState deklaruje zmienną stanu, którą można zmieniać bezpośrednio.
• useReducer deklaruje zmienną stanu wraz z logiką jej aktualizacji zawartą w funkcji redukującej (ang. reducer function).

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Hooki kontekstu

Kontekst pozwala komponentowi odbierać informacje od odległych rodziców bez przekazywania ich bezpośrednio za pomocą właściwości. Przykładowo, komponent główny aplikacji może przekazać aktualny motyw kolorystyczny wszystkim komponentom w drzewie poniżej, bez względu na to, jak głęboko są zagnieżdżone.

• useContext odczytuje wartości z kontekstu i subskrybuje się na wszelkie ich zmiany.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Hooki referencji

Referencje pozwalają komponentowi trzymać informacje, które nie są potrzebne do renderowania, jak np. węzeł DOM lub ID opóźnienia (ang. timeout). W przeciwieństwie do stanu, zmiana wartości referencji nie powoduje ponownego przerenderowania komponentu. Referencje są niejako “ukrytą furtką”, pozwalającą wyjść poza paradygmaty Reacta. Przydają się, gdy potrzebujesz skorzystać z systemów nie-reactowych, jak choćby API wbudowane w przeglądarkę.

• useRef deklaruje referencję. Możesz w niej trzymać dowolną wartość, lecz zwykle używa się jej do przechowywania węzła DOM.
• useImperativeHandle pozwala dostosować referencję wystawianą przez twój komponent. Rzadko używany.

function Form() {
  const inputRef = useRef(null);
  // ...

Hooki efektu

Efekty pozwalają komponentowi połączyć się i zsynchronizować z zewnętrznymi systemami. Mowa tu o sieci, DOM przeglądarki, animacjach, widgetach napisanych przy użyciu innej biblioteki czy innego kodu nie-reactowego.

• useEffect łączy komponent z systemem zewnętrznym.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Efekty są “ukrytą furtką”, pozwalającą wyjść poza paradygmaty Reacta. Nie używaj ich do organizowania przepływu danych w aplikacji. Jeśli nie wchodzisz w interakcję z systemem zewnętrznym, możesz wcale nie potrzebować efektu.

Istnieją dwa rzadko używane wariacje hooka useEffect, różniące się momentem wywołania:

• useLayoutEffect jest wywoływany zanim przeglądarka wykona ponowne rysowanie treści strony. Można w nim mierzyć elementy układu strony.
• useInsertionEffect jest wywoływany zanim React wprowadzi zmiany do DOM. Biblioteki mogą za jego pomocą wstrzyknąć dynamiczne style CSS.

Hooki wydajnościowe

Powszechnie stosowanym zabiegiem, mającym na celu optymalizację wydajności renderowania, jest pominięcie zbędnej pracy. Na przykład, możesz poinstruować Reacta, aby użył poprzednio obliczonej wartości lub aby nie renderował ponownie komponentu, jeśli dane nie zmieniły się od ostatniego renderowania.

Aby pominąć obliczenia i niepotrzebne renderowania, użyj jednego z poniższych hooków:

• useMemo pozwala zapamiętać wynik kosztownych obliczeń.
• useCallback pozwala zapamiętać definicję funkcji przed przekazaniem jej do zoptymalizowanego komponentu.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Czasami nie można pominąć ponownego renderowania, ponieważ ekran mimo wszystko musi zostać zaktualizowany. W takim przypadku możesz poprawić wydajność poprzez rozdzielenie blokujących aktualizacji, które muszą być synchroniczne (np. wpisywanie przez użytkownika tekstu do pola) od nieblokujących, które nie muszą blokować interfejsu (np. aktualizacja wykresu).

Aby spriorytetyzować renderowanie, użyj jednego z tych hooków.

• useTransition pozwala oznaczyć zmianę stanu jako nieblokującą, co umożliwia innym zmianom na przerwanie jej.
• useDeferredValue pozwala opóźnić aktualizację niekrytycznej części interfejsu na rzecz innych.

Hooki zasobów

Do zasobów można dostać się z poziomu komponentu bez konieczności tworzenia dla nich stanu lokalnego. Na przykład, komponent może odczytywać wiadomość z Obietnicy (ang. Promise) albo informacje o stylu z kontekstu.

Aby odczytać wartość z zasobu, użyj tego Hooka:

• use pozwala na odczytanie wartości zasobu, takiego jak Obietnica (ang. Promise) lub kontekst.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

Inne hooki

Te hooki przydają się zwykle tylko autorom bibliotek i nieczęsto spotyka się je w kodzie aplikacyjnym.

• useDebugValue pozwala zmienić etykietę twojego własnego hooka, którą wyświetlają React DevTools.
• useId pozwala komponentowi przypisać do siebie unikalny identyfikator. Zwykle używane w połączeniu z API dostępności (ang. accessibility).
• useSyncExternalStore pozwala komponentowi na zasubskrybowanie się do magazynu zewnętrznego.

Twoje własne hooki

Możesz także zdefiniować swoje własne hooki jako funkcje javascriptowe.