Odczytywanie i zapisywanie atomów za pomocą useAtom

useAtom(someAtom) zwraca [value, setter], odwzorowując API useState. value to bieżący stan atomu, a setter go aktualizuje. Należy używać tego hooka, gdy komponent zarówno odczytuje atom, jak i go zapisuje.

setter przyjmuje albo nową wartość, albo funkcję aktualizującą: setCount(c => c + 1).

useAtomValue(someAtom) zwraca wyłącznie bieżącą wartość, bez funkcji setter. Należy używać go w komponentach przeznaczonych wyłącznie do wyświetlania, które odczytują stan, ale nigdy go nie modyfikują.

Ponieważ komponent nie przechowuje referencji do funkcji setter, intencja jest jasno udokumentowana w kodzie: ten komponent służy wyłącznie do odczytu.

useSetAtom(someAtom) zwraca wyłącznie funkcję setter. Co istotne, nie subskrybuje komponentu wartości atomu. Komponent nigdy nie renderuje się ponownie, gdy atom się zmienia.

Należy używać go w komponentach obsługujących wyłącznie akcje, takich jak przyciski, które wysyłają zmiany stanu, ale nie wyświetlają żadnych pochodnych elementów interfejsu.

Komponent, który wywołuje useSetAtom(countAtom) w celu zwiększenia licznika, nigdy nie renderuje się ponownie, gdy countAtom się zmienia, ponieważ nie subskrybuje jego wartości. Ponownie renderuje się tylko komponent wyświetlający licznik.

To prosta, ale skuteczna optymalizacja: należy oddzielić komponenty zapisujące od odczytujących, aby zapobiec kaskadowemu ponownemu renderowaniu.

Należy zaimportować atomWithStorage z jotai/utils. Używa się go dokładnie tak jak atom(), ale jako pierwszy argument przekazuje się klucz przechowywania: atomWithStorage('theme', 'light'). Atom automatycznie synchronizuje się z localStorage.

Po ponownym załadowaniu strony atom pobiera stan z localStorage. Wszystkie komponenty odczytujące atom natychmiast otrzymują utrwaloną wartość.

Symbol RESET z jotai/utils można przekazać funkcji setter atomu atomWithStorage: setter(RESET). Spowoduje to wyczyszczenie wpisu w localStorage i przywrócenie atomu do jego wartości początkowej.

Jest to przydatne podczas wylogowywania lub w przypadku przycisków resetujących ustawienia do wartości domyślnych na stronach ustawień.

atomFamily z jotai/utils tworzy fabrykę zwracającą sparametryzowany atom. Na przykład atomFamily(id => atom(null)) tworzy osobny atom dla każdego przekazanego unikatowego id.

Jest to idealne rozwiązanie dla stanu poszczególnych elementów, takiego jak selectedAtom(itemId) lub expandedAtom(rowId), bez konieczności zarządzania pojedynczym dużym atomem zawierającym mapę.

Rodziny atomów mogą rosnąć bez ograniczeń, jeśli kumulują się identyfikatory. Należy użyć atomFamily.setShouldRemove((createdAt, param) => ...), aby zdefiniować predykat czyszczenia, którego Jotai używa przy podejmowaniu decyzji o usunięciu nieaktualnych elementów rodziny.

W przypadku list, do których elementy są dodawane i z których są usuwane, należy zawsze czyścić wpisy rodziny atomów po usunięciu elementów, aby uniknąć wycieków pamięci.

Pakiet jotai-devtools udostępnia wizualny panel zawierający listę wszystkich aktywnych atomów i ich bieżących wartości. Należy go zainstalować, opakować aplikację w DevTools i sprawdzać stan atomów w czasie rzeczywistym.

Każda aktualizacja atomu jest rejestrowana wraz z poprzednią i następną wartością, co ułatwia debugowanie złożonych interakcji między atomami.

Na dużej liście komponent ListContainer może używać useSetAtom(selectedIdAtom) do aktualizowania zaznaczenia bez subskrybowania selectedIdAtom. Gdy zaznaczenie się zmienia, ponownie renderują się tylko poszczególne komponenty ListItem wywołujące useAtomValue(selectedIdAtom).

Ten wzorzec dobrze skaluje się wraz ze wzrostem aplikacji: dodanie tysięcy elementów listy nie spowalnia aktualizacji zaznaczenia.

Należy wybrać hook odpowiadający potrzebom komponentu: useAtomValue do wyświetlania, useSetAtom do obsługi samych akcji, a useAtom, gdy potrzebne są oba te zastosowania. Tak zaprojektowane API sprawia, że odpowiedzialność komponentu jest od razu jasna.

Komponent pola formularza zazwyczaj używa useAtom, przycisk przesyłania formularza używa useSetAtom, a etykieta wyświetlająca licznik używa useAtomValue.

Jaka jest główna zaleta używania useSetAtom zamiast useAtom?

useAtom udostępnia zarówno wartość, jak i setter; useAtomValue udostępnia tylko wartość (subskrypcje odczytu); useSetAtom udostępnia tylko setter (brak ponownego renderowania przy zmianie wartości). atomWithStorage utrwala dane w localStorage i obsługuje RESET, a atomFamily tworzy atomy zależne od parametrów na potrzeby dynamicznych list.

Wybór właściwego hooka ogranicza niepotrzebne ponowne renderowania i jasno określa przeznaczenie komponentu.