UseCallback, podobnie jak hook useMemo, jest przydatny w sytuacji, gdy chcesz poprawić wydajność swojej aplikacji. Dzięki temu można uniknąć niepotrzebnych renderowań, dzięki czemu aplikacja może działać szybciej.

UseCallback zwraca zapamiętaną wersję funkcji, która zmienia się tylko wtedy, gdy zmienia się jedna z zależności. Oznacza to, że jeśli masz element rodzica z elementami dziećmi, to dzieci renderowane są za każdym razem, gdy rodzic jest renderowany, nawet, jeśli ich zawartość się nie zmieniła. Można jednak uniknąć renderowania dzieci, jeśli zamiast zwykłej funkcji przejdziesz do nich funkcję owiniętą w hook useCallback, i jednocześnie owiniesz komponent dziecko w komponent wyższego rzędu React.memo. Brzmi strasznie? Zobaczmy to na przykładzie:

Hook useMemo zwraca zapamiętaną wartość. Dlatego możesz go użyć do optymalizacji wydajności swojej aplikacji. Jeśli potrzebujesz wykonać duże obliczenia, aby uzyskać potrzebną wartość, możesz to zrobić tylko raz i użyć hook-a useMemo, aby zapamiętać otrzymaną wartość.

Hook-a UseRef można używać na dwa sposoby. Po pierwsze, pozwala na bezpośredni dostęp do elementu DOM, dzięki czemu możemy nim manipulować. Po drugie, może zachować dowolną zmienną wartość w swojej właściwości .current, która nie zmienia się między renderowaniami.

Hook useEffect pozwala na przeprowadzanie efektów ubocznych w komponentach funkcyjnych. Kod umieszczony w useEffect zadziała po każdym renderowaniu, albo przy wybranych renderowaniach, jeśli tak zadecydujemy (musimy wtedy ustawić tablicę zależności, która określa, kiedy kod ma zostać wykonany). Ponieważ hook ten „odpala się” zaraz po wyrenderowaniu komponentu, możemy za jego pomocą modyfikować stan, zanim jeszcze zostanie on wyświetlony w przeglądarce. Jest to przydatne np. podczas pobierania danych, tworzenia subskrypcji lub ręcznej ingerencji w drzewo DOM.

Komponent useContext umożliwia przekazywanie danych wewnątrz drzewa komponentów bez konieczności przekazywania ich przez właściwości każdego komponentu pośredniego. Dzięki temu możliwe jest współdzielenie pewnych wartości przez takie komponenty bez konieczności przekazywania ich jako właściwości na każdym poziomie drzewa.

UseReducer jest alternatywą dla useState. Działa lepiej, gdy mamy złożoną logikę stanu, która obejmuje wiele podwartości (np. jeśli stan jest obiektem zagnieżdżonym) lub gdy następny stan zależy od poprzedniego. Hook UseReducer przyjmuje reduktor będący funkcją o sygnaturze (stan, akcja) => nowyStan i zwraca aktualny stan w parze z metodą dispatch:

Hooki to nowa funkcjonalność React, dzięki której możemy „zahaczyć” o jego wewnętrzne mechanizmy, co ułatwia pisanie aplikacji. Pierwszy z hook-ów, który chcę przedstawić nazywa się useState i jest to hook, który pozwala korzystać ze stanu w komponencie funkcyjnym (przed wprowadzeniem hook-ów w komponentach funkcyjnych nie można było korzystać ze stanów, dlatego nazywały się one komponentami bezstanowymi. Teraz nazwa została zmieniona na komponenty funkcyjne).