Атомы: единица состояния в Jotai

В Jotai состояние разделено на атомы — небольшие независимые части реактивного состояния. Каждый атом хранит одно значение и создаётся вне компонентов с помощью atom(initialValue).

Это соответствует ментальной модели разделения состояния на минимальные осмысленные единицы вместо одного большого объекта хранилища.

Когда значение атома изменяется, повторно отрисовываются только компоненты, подписанные на этот конкретный атом. Компоненты, читающие другие атомы, не затрагиваются.

Такая мелкозернистая реактивность — главное преимущество Jotai перед React Context, который повторно отрисовывает всех потребителей при любом изменении.

Определяйте атомы на уровне модуля: const countAtom = atom(0). Это обеспечивает стабильность идентификатора атома между отрисовками и не позволяет создавать атом заново при каждом монтировании компонента.

Атомы — это лёгкие ссылки; они не хранят собственное значение. Значение находится в хранилище Jotai.

По умолчанию Jotai использует неявное глобальное хранилище. Чтобы начать использовать атомы, не нужно оборачивать приложение в провайдер, что упрощает внедрение в существующие проекты.

Атомы доступны из любого компонента в дереве без явной передачи свойств через компоненты или протягивания контекста.

Если требуется несколько независимых экземпляров одного дерева компонентов — например, две отдельные формы с собственными атомами состояния формы, — оберните каждый экземпляр в провайдер Jotai. Каждый провайдер создаёт изолированное хранилище.

Это полезно для архитектур микрофронтендов или сложных макетов страниц с независимыми областями состояния.

Глобальное хранилище сохраняет атомы в течение всего времени жизни приложения. Хранилище провайдера с ограниченной областью действия сбрасывается при размонтировании провайдера, что идеально подходит для модальных окон или состояния уровня страницы, которое не должно сохраняться глобально.

Можно даже передать в провайдер пользовательский экземпляр хранилища, чтобы изолировать серверную отрисовку.

Zustand использует один объект хранилища с селекторами, предотвращающими ненужные повторные отрисовки. Jotai разделяет состояние на атомы, и каждый компонент подписывается только на читаемые им атомы.

Jotai лучше подходит для детализированного состояния интерфейса — отдельных значений полей ввода и переключателей. Zustand хорошо подходит для более крупного взаимосвязанного состояния приложения.

React Context повторно отрисовывает каждый компонент-потребитель при изменении значения контекста, даже если компонент использует только одно поле объекта контекста.

Jotai решает эту проблему: компонент, использующий useAtom(nameAtom), повторно отрисовывается только при изменении nameAtom, а не при изменении любого другого атома.

По умолчанию Jotai использует сравнение Object.is, чтобы определить, изменилось ли значение атома. Если присвоить атому то же значение, которое он уже содержит, повторная отрисовка не запускается.

Для сложных объектов используйте утилиту selectAtom, чтобы получить стабильное примитивное значение из большого атома и предотвратить повторные отрисовки при изменении несвязанных полей.

useState относится к одному компоненту. Атомы доступны всему дереву компонентов без явной передачи. Когда два соседних компонента читают один и тот же атом, они автоматически остаются синхронизированными.

Это устраняет необходимость поднимать состояние выше для обмена данными между компонентами и одновременно сокращает количество повторных отрисовок.

Типичные атомы: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Они определяются один раз и импортируются в любом месте приложения.

Каждый атом независим: изменение cartItemsAtom не вызывает повторную отрисовку компонентов, которые читают только themeAtom.

Чем Jotai отличается от React Context с точки зрения повторного рендеринга?

Атомы — фундаментальная единица состояния в Jotai. Они создаются с помощью atom(initialValue) вне компонентов и по умолчанию доступны всему дереву без Provider. При изменении атома повторно рендерятся только его подписчики.

Эта мелкозернистая реактивность — главное преимущество Jotai перед React Context, а модель подписки на отдельные атомы отличается от подхода Zustand с единым хранилищем.