React.js Hooks

Poniżej przedstawiam zestawienie zalet i wad hooków w React.js, na podstawie mojego doświadczenia w wielu projektach. Wady oraz zalety są przedstawione w kolejności od najbardziej do najmniej znaczących.

Zalety:

• Naturalny syntax, przejrzystość kodu - React hooks to po prostu funkcje które uruchamiamy w komponencie, więc sama koncepcja jest łatwiejsza do zrozumienia dla początkujących niż na przykład HOC. Syntax przy hookach jest mniej “verbose” i porównując go z Render Props, zaoszczędamy dużo na ilości oraz czytelności naszego kodu.
• Modułowość - Hooki pozwalają również na pisanie kodu w bardziej zorganizowany sposób, gdzie kod grupowany jest w osobne moduły w zależności od jego funkcjonalności, a nie na podstawie cykli życia z których korzysta.
• Elastyczność - łatwa możliwość kompozycji, tworzenia reużywalnego kodu pomiędzy komponentami. Dodatkowo hooki można używać wewnątrz innych hooków, co pozwala na bezbolesne łączenie kilku funkcjonalności.
• Dobre wsparcie TypeScript - rozwiązania do tworzenia reużywalnej logiki takie jak na przykład HOC (Higher Order Component) są zazwyczaj trudne do otypowania. W hooks typowanie jest bardziej naturalne i początkujący nie powinni mieć z tym problemu. Dodatkowo wartości prymitywne w funkcji useState są typowane automatycznie, co powinno być ułatwieniem dla osób zaczynających z TypeScript’em.
• Jawne pochodzenie wartości - jest to główny problem Higher Order Components. Przy użyciu kilku HOC możemy nie wiedzieć z którego HOC pochodzi dana wartość, lub co gorsza jeden HOC może nadpisać właściwość pochodzącą z innego. W hookach nie ma tego problemu. Wartość, którą zwrócił dany hook zapisujemy w zmiennej i widzimy skąd pochodzą poszczególne wartości.
• “Instance less” - hooki nie tworzą instancji nowego komponentu tak jak w przypadku HOC czy Render Props.
• Wbudowana memoizacja - hooki posiadają wbudowane funkcje do memoizacji danych takie jak useMemo oraz useCallback.
• Łatwiejsza implementacja funkcji obserwującej (watchera) - implementacja funkcji, która reaguje na zmiany stanu jest łatwiejsza niż klasowy componentDidMount, a funkcja do inwalidacji (służąca do anulowania aktualnej operacji, przed ponownym uruchomieniem watchera - zapobiegająca “race conditions”) jest zwracana jako wartość funkcji watch.

Wady:

• Stale closures - przestarzałe wartości w domknięciach. Korzystając z hooków, których funkcje uruchamiają się w zależności od pewnych warunków (nie przy każdym renderze), musimy pamiętać, aby w tablicy zależności umieścić wszystkie wartości z których korzystamy w tej funkcji. Może się okazać, że wartość stanu z której korzystamy będzie przestarzała. Na szczęście istnieją sposoby na uniknięcie takich problemów i został stowrzony plugin eslint, który ostrzega przed omyłkowym niepodaniem wartości w tablicy eslint-plugin-react-hooks.
• Zmieniony sposób obsługi cykli życia komponentu - korzystanie z hooka useEffect, który implementuje cykle życia komponentu, na początku może nie być tak oczywiste jak w przypadku klas, gdzie każdy cykl miał swoją funkcję o określonej nazwie.

Zestawiając wady oraz zalety, Hooks Api wydaje się obecnie najlepszym rozwiązaniem do tworzenia komponentów, oraz reużywalnej logiki w React.js.