7. Czym są hooki? Jakie znasz?

Hooki są niczym innym, jak funkcjami. Nie charakteryzują się szczególną składnią, są za to efektem pewnej umowy, założenia które zostało przyjęte.

Zasady pisania i używania hooków:

• Ich nazwa powinna zaczynać się od use, np. useState lub useEffect - pozwala to rozpoznać hook
• Wywołanie hooków może nastąpić tylko w komponencie funkcyjnym lub w innym hooku - wynika to z ich zastosowania, np. w przerenderowaniu komponentu
• Hooki powinny być wywoływane na najwyższym poziomie, a więc bezpośrednio w komponencie, jak najwyżej. Nie powinny być wywoływane wewnątrz klauzuli if, w pętlach ani domknięciach (closure) - sprawia to, że hooki wykonają się zawsze w tej samej kolejności wewnątrz komponentu podczas jego przerenderowania

Przykłady hooków wbudowanych w react:

• useState - utrzymywanie stanu komponentu
• useEffect - przeprowadzenie operacji w każdym przerenderowaniu komponentu, w oparciu o dependency array. Zastępuje kilka funkcji znanych z komponentów klasowych, takich jak componentDidMount czy componentDidUpdate. Z tego hooka można korzystać w jednym komponencie wiele razy, a ich kolejność wykonania jest taka sama jak kolejność deklaracji. Do każdej funkcji useEffect przekazywany jest callback, czyli własnie effect. Callback ten może zwracać inną funkcję, tzw. czyszcząca (cleanup function), która wykonywana jest zawsze przed kolejnym wykonaniem samego efektu - np. w celu posprzątania po poprzednim.
• useRef - działa jak pojemnik na dane, których zmiana nie powoduje przerenderowania komponentu. Do referencji można przypisać wartość lub użyć jej do wskazywania danego komponentu, poprzez deklarację komponentu jako forwardRef i przekazanie referencji do niego we właściwości (prop) ref
• useMemo, useCallback - hooki przydatne w memoizacji, czyli zapamiętywaniu wartości lub całych funkcji pomiędzy przerenderowaniami komponentu. Przydatne, gdy nie chcemy przeprowadzać wymagających obliczeń przy każdym renderowaniu - dopiero zmiana wartości przekazanych do dependency array spowoduje przeliczenie wartości tych funkcji przy najbliższym przerenderowaniu.

Więcej informacji o hookach znajdziesz tutaj.