Funkcyjny power-up
Za nazwą React Hooks kryje się kilka funkcji pozwalających stosować funkcjonalności, do tej pory zarezerowane dla komponentów klasowych, w komponentach funkcyjnych.
Do tych funkcjonalności zaliczamy przede wszystkim:
- obsługę lokalnego stanu komponentu (useState)
- obsługę cyklu życia komponentu (useEffect)
- uproszczone korzystanie z Context API (useContext)
Do bardziej wyspecjalizowanych zadań, mamy do dyspozycji dodatkowe Hooki, które ułatwiają:
- obsługę mechanizmu referencji (useRef i useImperativeHandle)
- obsługę rozbudowanego stanu na wzór architektury Flux i Reduxa (useReducer)
- memoizację (useMemo i useCallback)
- odczytywanie stanu DOM (useLayoutEffect)
Oprócz gotowych rozwiązań, dostaliśmy możliwość deklarowania własnych Hooksów.
Dlaczego powinieneś opanować React Hooks?
Sam czekałem z nauką kilka dobrych miesięcy. Status proponowanego rozszerzenia, brak materiałów i wypracowanych dobrych praktyk, sprawiły że wstrzymałem się z inwestowaniem czasu.
Jednak Hooksy na stałe zagościły w świecie Reacta za sprawą dodania ich do oficjalnego API w lutym 2019. Od tego czasu, siłą rzeczy, stopniowo pojawiają się w co raz większej ilości projektów.
Doszedłem do wniosku, że nie ma co zwlekać ani chwili dłużej. Początkowo byłem onieśmielony gradobiciem useSomethingThatILearnedAlready. Jednak po kilku kwadransach, zauważyłem że pisanie kodu z użyciem Hooks przychodzi mi z niesamowitą łatwością i co najważniejsze, jest po prostu przyjemne.
Koło wymyślone na nowo?
Ale chwila, chwila. Skoro React zdobył taką popularnością, to komponenty klasowe, mające do tej pory monopol na obsługę złożonych elementów interfejsu, musiały sobie radzić z tym całkiem nieźle.
Czyżby całe zamieszanie ograniczało się do sztucznego wypierania słowa kluczowego class na rzecz, modnego w Reactowych kręgach, function?
Proste, że nie.
Wróćmy do początku, czyli misji jaką stawia sobie React. Biblioteka ma na celu pomagać nam budować interfejsy użytkownika za pomocą małych, niezależnych i możliwe prostych komponentów.
Niestety, w przypadku złożonych komponentów (obsługujących formularze, pobierających dane z API itd.) nie ma mowy o czymś małym ani prostym:
W tym przykładzie mamy do czynienia z kilkoma istotnymi problemami:
- Podział na mniejsze części blokuje logika związana z obsługą stanu.
- Metody cyklu życia dodają dużo złożoności, zdecydowanie brakuje wyraźnych połączeń pomiędzy poszczególnymi efektami ubocznymi. Taki stan rzeczy znacznie utrudnia testowanie. Przekonałem się o tym w ramach serii Testowanie komponentów React.
- Korzystanie z Context API wymaga znajomości wzorca Render Props, którego opanowanie sprawia trudność wielu początkującym i naraża nas na sztuczne rozdmuchanie drzewa komponentów.
Team Reacta postanowił dać nam do dyspozycji nowe API, stanowiące remedium na powyższe problemy. Dzięki Hooks osiągniemy ten sam efekt końcowy za pomocą mniejszej ilości kodu, który jest jednocześnie łatwiejszy do zrozumienia i testowania:
Co muszę umieć?
Powyższy przykład jest doskonałym dowodem na to, że Hooksy bazują na znajomości kluczowych pojęć, które powinien znać każdy programista React:
Oczywiście jak to w Reactcie bywa, nie obejdzie się bez dobrej znajomości vanilla JavaScript a zwłaszcza:
Czujesz, że przydałaby Ci się powtórka wymienionych zagadnień? Zanim zabierzesz się za naukę Hooks, zacznij od zapoznania się z podlinkowanymi materiałami. Przygotowałem je specjalnie z myślą o osobach, które chcą wypełnić luki w wiedzy o JavaScript i React.
A jeżeli masz te tematy w małym palcu to…
