Чтение и запись атомов с помощью useAtom

useAtom(someAtom) возвращает [value, setter], повторяя API useState. value — текущее состояние атома, а setter обновляет его. Используйте этот хук, когда компонент и читает, и записывает атом.

setter принимает либо новое значение, либо функцию обновления: setCount(c => c + 1).

useAtomValue(someAtom) возвращает только текущее значение, без setter. Используйте его в компонентах, предназначенных только для отображения: они читают состояние, но никогда не изменяют его.

Поскольку компонент не хранит ссылку на setter, намерение явно отражено в коде: этот компонент только читает данные.

useSetAtom(someAtom) возвращает только функцию setter. Что особенно важно, он не подписывает компонент на значение атома. Компонент никогда не рендерится повторно при изменении атома.

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

Компонент, вызывающий useSetAtom(countAtom) для увеличения счётчика, никогда не рендерится повторно при изменении countAtom, поскольку у него нет подписки на значение. Повторно рендерится только компонент, отображающий счётчик.

Это простая, но мощная оптимизация: разделяйте компоненты, записывающие и читающие данные, чтобы предотвратить каскадный повторный рендеринг.

Импортируйте atomWithStorage из jotai/utils. Используйте его так же, как atom(), но передайте ключ хранилища первым аргументом: atomWithStorage('theme', 'light'). Атом автоматически синхронизируется с localStorage.

После перезагрузки страницы атом восстанавливает состояние из localStorage. Все компоненты, читающие этот атом, сразу получают сохранённое значение.

Символ RESET из jotai/utils можно передать setter атома atomWithStorage: setter(RESET). Это удаляет запись из localStorage и возвращает атом к исходному значению.

Это удобно для сценариев выхода из учётной записи или кнопок «восстановить значения по умолчанию» на страницах настроек.

atomFamily из jotai/utils создаёт фабрику, возвращающую атом с параметром. Например, atomFamily(id => atom(null)) создаёт отдельный атом для каждого переданного уникального идентификатора.

Это идеально подходит для состояния отдельных элементов, например selectedAtom(itemId) или expandedAtom(rowId), без необходимости управлять одной большой таблицей соответствий.

Семейства атомов могут неограниченно разрастаться, если идентификаторы накапливаются. Используйте atomFamily.setShouldRemove((createdAt, param) => ...), чтобы задать условие очистки, которое Jotai применяет при удалении устаревших элементов семейства.

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

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

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

В большом списке компонент ListContainer может использовать useSetAtom(selectedIdAtom) для обновления выбранного элемента, не подписываясь на selectedIdAtom. При изменении выбора повторно рендерятся только отдельные компоненты ListItem, вызывающие useAtomValue(selectedIdAtom).

Этот подход хорошо масштабируется: добавление тысяч элементов списка не замедляет обновление выбора.

Выбирайте хук в соответствии с задачами компонента: useAtomValue — для отображения, useSetAtom — для действий, а useAtom — когда нужны обе возможности. Такая структура API позволяет сразу понять ответственность компонента.

Компонент поля формы обычно использует useAtom; кнопка отправки — useSetAtom; подпись, отображающая счётчик, — useAtomValue.

В чём главное преимущество использования useSetAtom вместо useAtom?

useAtom предоставляет и значение, и setter; useAtomValue — только значение (подписку для чтения); useSetAtom — только setter (без повторного рендеринга при изменении значения). atomWithStorage сохраняет значение в localStorage и поддерживает RESET, а atomFamily создаёт атомы с отдельными параметрами для динамических списков.

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