Производные и асинхронные атомы

Создайте производный атом, передав функцию получения: const doubleAtom = atom(get => get(countAtom) * 2). У этого атома нет собственного сохранённого значения: он пересчитывается при каждом изменении countAtom.

Производные атомы всегда актуальны и не требуют ручной синхронизации. В Jotai они соответствуют вычисляемым свойствам.

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

Если функция получения вызывает get(atomA) и get(atomB), производный атом обновляется при изменении atomA или atomB.

Производный атом с возможностью записи имеет и функцию получения, и setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). При чтении возвращается преобразованное значение, а при записи оно преобразуется и сохраняется обратно.

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

Функция получения может быть асинхронной: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai изначально поддерживает Promise, возвращаемые функциями получения атомов.

При изменении userIdAtom Jotai автоматически повторно запускает асинхронную функцию получения, а использующий её компонент приостанавливает работу на время загрузки.

Асинхронные атомы легко интегрируются с React Suspense. Оберните использующий их компонент в границу Suspense с резервным содержимым. Компонент приостанавливается, пока Promise ожидает завершения, и отображается после его выполнения.

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

Импортируйте loadable из jotai/utils. Оберните асинхронный атом: const loadableUserAtom = loadable(userAtom). Компоненты, читающие loadableUserAtom, получают {state: 'loading'}, {state: 'hasData', data: user} или {state: 'hasError', error}, не приостанавливая работу.

Используйте loadable, когда нужно отображать собственное состояние загрузки непосредственно в компоненте, а не полагаться на границу Suspense.

Утилита atomWithReset из jotai/utils создаёт атом, который можно вернуть к исходному значению с помощью символа RESET. Это чище, чем вручную отслеживать исходное значение и повторно применять его.

В формах сбрасывайте все атомы полей при отправке или отмене, вызывая setter каждого из них с RESET в одном обработчике.

Производный атом может читать данные из нескольких других атомов: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Так создаётся одна стабильная ссылка, которая обновляется при изменении любой зависимости.

Компоненты, которым нужна только сводка, подписываются на summaryAtom, а не на все три отдельных атома.

Производные атомы могут условно читать разные атомы: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). При переключении modeAtom производный атом автоматически меняет источник данных.

При каждом вычислении Jotai заново подписывается на нужный атом, поэтому устаревшие данные из неактивной ветви не используются.

Если функция получения асинхронного атома выбрасывает ошибку или отклоняет Promise, ошибка передаётся ближайшей границе обработки ошибок React при использовании Suspense. С loadable ошибка появляется в поле state.error для обработки непосредственно в компоненте.

В рабочем коде всегда используйте для асинхронных атомов либо ErrorBoundary, либо обёртку loadable.

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

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

Производные атомы вычисляют значения на основе других атомов с помощью функций получения и автоматического отслеживания зависимостей. Асинхронные атомы используют асинхронные функции получения и по умолчанию интегрируются с React Suspense; используйте loadable из jotai/utils, чтобы отказаться от Suspense и обрабатывать состояния загрузки и ошибок непосредственно в компоненте.

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