Atomy: jednostka stanu w Jotai

W Jotai stan jest podzielony na atomy, czyli małe, niezależne fragmenty reaktywnego stanu. Każdy atom przechowuje pojedynczą wartość i jest tworzony poza komponentami za pomocą atom(initialValue).

Odzwierciedla to model myślowy polegający na dzieleniu stanu na najmniejsze znaczące jednostki zamiast umieszczania go w jednym dużym obiekcie store.

Gdy wartość atomu się zmienia, ponownie renderowane są tylko komponenty, które zasubskrybowały ten konkretny atom. Komponenty odczytujące inne atomy pozostają bez zmian.

Ta drobnoziarnista reaktywność jest główną zaletą Jotai w porównaniu z React Context, który ponownie renderuje wszystkich odbiorców przy każdej zmianie.

Atomy należy definiować na poziomie modułu: const countAtom = atom(0). Dzięki temu tożsamość atomu pozostaje stabilna między renderowaniami, a atom nie jest tworzony ponownie przy każdym montowaniu komponentu.

Atomy są lekkimi odwołaniami; nie przechowują własnej wartości. Wartość znajduje się w store Jotai.

Domyślnie Jotai korzysta z niejawnego globalnego store. Nie trzeba opakowywać aplikacji w Provider, aby rozpocząć korzystanie z atomów, co ułatwia wdrożenie w istniejących projektach.

Atomy są globalnie dostępne z dowolnego komponentu w drzewie, bez przekazywania propsów i przekazywania stanu przez context.

Gdy potrzebnych jest wiele niezależnych instancji tego samego drzewa komponentów (np. dwa osobne formularze, każdy z własnymi atomami stanu formularza), każdy z nich należy opakować w Jotai Provider. Każdy Provider tworzy odizolowany store.

Jest to przydatne w architekturach mikrofrontendów lub złożonych układach stron z niezależnymi obszarami stanu.

Globalny store przechowuje atomy przez cały czas działania aplikacji. Store Provider o ograniczonym zakresie jest resetowany po odmontowaniu Provider, co doskonale sprawdza się w przypadku modalnych okien dialogowych lub stanu na poziomie strony, który nie powinien być przechowywany globalnie.

Można nawet przekazać do Provider własną instancję store, aby odizolować renderowanie po stronie serwera.

Zustand korzysta z pojedynczego obiektu store i selektorów, aby zapobiegać niepotrzebnym ponownym renderowaniom. Jotai dzieli stan na atomy, a każdy komponent subskrybuje tylko atomy, które odczytuje.

Jotai lepiej pasuje do drobnoziarnistego stanu interfejsu użytkownika (pojedynczych wartości pól wejściowych, flag przełączników). Zustand dobrze sprawdza się w przypadku większego, wzajemnie powiązanego stanu aplikacji.

React Context ponownie renderuje każdy komponent odbierający wartość za każdym razem, gdy zmienia się wartość contextu, nawet jeśli dany komponent korzysta tylko z jednego pola obiektu contextu.

Jotai rozwiązuje ten problem: komponent korzystający z useAtom(nameAtom) jest ponownie renderowany tylko wtedy, gdy zmienia się nameAtom, a nie przy zmianie dowolnego innego atomu.

Jotai domyślnie używa porównania Object.is, aby określić, czy wartość atomu uległa zmianie. Jeśli atomowi zostanie przypisana ta sama wartość, którą już przechowuje, ponowne renderowanie nie zostanie wywołane.

W przypadku złożonych obiektów należy użyć narzędzia selectAtom, aby wyprowadzić stabilną wartość prymitywną z dużego atomu i zapobiec ponownym renderowaniom przy zmianie niezwiązanych pól.

useState jest lokalny dla pojedynczego komponentu. Atomy są współdzielone w całym drzewie komponentów bez konieczności jawnego przekazywania. Gdy dwa sąsiednie komponenty odczytują ten sam atom, automatycznie pozostają zsynchronizowane.

Eliminuje to potrzebę podnoszenia stanu w celu współdzielenia go między komponentami, a jednocześnie ogranicza ponowne renderowania.

Typowe atomy to: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Są one definiowane raz i importowane w dowolnym miejscu aplikacji.

Każdy atom jest niezależny: aktualizacja cartItemsAtom nie wywołuje ponownego renderowania komponentów, które odczytują tylko themeAtom.

Czym Jotai różni się od React Context pod względem ponownego renderowania?

Atom jest podstawową jednostką stanu w Jotai. Tworzy się go za pomocą atom(initialValue) poza komponentami, a domyślnie współdzieli w całym drzewie bez Provider. Gdy atom się zmienia, ponownie renderują się tylko jego subskrybenci.

Ta drobnoziarnista reaktywność jest główną zaletą Jotai w porównaniu z React Context, a model subskrypcji poszczególnych atomów różni się od podejścia Zustand opartego na pojedynczym store.