Co to jest Hook?

Czym są Hooksy (czyli Haki) w React? Założeniowo, Hook jest funkcją specjalną, której celem jest "haczyć" się do funkcji lub komponentów w React i umożliwić im korzystanie z funkcji z komponentów oraz korzystanie ze stanu, bez konieczności tworzenia klasowego komponentu.

Podstawowe użycie Hook

Popularnym przykładem Hook jest "useState", który pozwala na korzystanie ze stanu w komponentach funkcyjnych. Dla przykładu:

function Example() {'{'}
const [count, setCount] = useState(0);
return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)} > Click me </button> </div> ); }

W powyższym przykładzie, "useState" jest Hookiem. Jest on wywołany wewnątrz komponentu funkcyjnego "Example" w celu dodania do niego pewnej nowej funkcjonalności stanu. "useState" zwraca parę: bieżącą wartość stanu oraz funkcję, która pozwala go aktualizować.

Opis działania Hook

W momencie wywołania Hook "useState", React zwraca dwuelementową tablicę. Pierwszy element tablicy reprezentuje wartość stanu, a drugi funkcję do jego zmiany. W zdecydowanej większości, Haki używane są do dawania komponentom dostępu do funkcji lub informacji, które normalnie wymagałyby zdefiniowania komponentu jako klasy.

Zasady użycia Hook

Podczas pracy z Hookami, ważne jest pamiętanie o pewnych zasadach. Haki nie mogą być wywołane wewnątrz pętli, warunków lub zagnieżdżonych funkcji. Mogą być wywoływane jedynie z wewnątrz ciała komponentów funkcyjnych React. Haki są również dedykowane Reactowi, więc nie powinny być używane poza komponentami.