Лёгкие сторы: сравнение

Четыре стора из одной весовой категории решают одну задачу клиентского состояния, но думают о ней по-разному. Zustand держит единый стор и режет ре-рендеры селекторами. Jotai собирает состояние из атомов и сам строит граф зависимостей. Valtio даёт мутировать объект напрямую и снимает иммутабельный срез. Nano Stores выносит атом за пределы фреймворка. Вопрос не в том, какой лучше, а в том, какая ментальная модель ложится на конкретную задачу и команду.

• Выбор стора под новый React-проект, когда Context уже мал, а Redux избыточен
• Astro-сайт или микрофронтенды, где состояние делят несколько фреймворков сразу
• Канвас-редактор с глубоко вложенным состоянием фигур и сцен
• Дашборд с множеством мелких независимых кусков состояния, выводящих друг из друга
• Жёсткий бюджет на размер бандла, где счёт идёт на килобайты

Предварительные знания

• Модель Zustand: единый стор через create и селекторы против лишних ре-рендеров
• Идея атомарного состояния и графа зависимостей в Jotai
• Понимание, что такое прямая мутация и иммутабельный срез в Valtio

• Zustand
• Jotai
• Valtio

Четыре ментальные модели

Главное различие не в API, а в том, как стор предлагает думать о состоянии. Zustand держит единый объект-стор и просит выбирать из него куски селекторами. Jotai разбивает состояние на атомы и связывает их в граф: производный атом сам пересчитывается при изменении исходных. Valtio даёт мутировать вложенный объект напрямую, а React читает замороженный снимок. Nano Stores выносит атом в отдельный модуль, не зная ни про какой фреймворк.

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

Размер бандла и удобство разработки

Все четыре стора маленькие, но различаются по порядку величины. Nano Stores самый компактный: ядро измеряется сотнями байт, потому что независимость от фреймворка не тянет адаптеры в основной пакет. Zustand, Jotai и Valtio тоже лёгкие, обычно единицы килобайт в gzip. На фоне Redux Toolkit с его обвязкой разница ощутима, но между этими четырьмя размер редко становится решающим аргументом.

По удобству разработки модели расходятся. Zustand читается линейно: состояние и действия в одном месте, селектор очевиден. Valtio убирает шум на вложенных структурах, но требует помнить про разделение snap для чтения и state для записи. Jotai силён композицией мелких атомов, но при разрастании графа за зависимостями нужно следить. Nano Stores минималистичен, зато для производных и async-логики тянет отдельные хелперы.

Размер бандла редко решает выбор между этими четырьмя: разница в килобайты теряется на фоне самого приложения. Решающим он становится в двух случаях: встраиваемый виджет в чужую страницу и набор микрофронтендов, где каждый лишний килобайт умножается. Там перевес Nano Stores заметен.

Какой стор под какую задачу

Сводим к практическим правилам. Zustand разумен по умолчанию для большинства клиентского состояния в React: предсказуемая модель, минимум кода, селекторы под ре-рендеры. Jotai встаёт лучше, когда состояние естественно дробится на множество мелких кусков, выводящих друг друга: фильтры, формы, дашборды. Valtio выигрывает на глубоко вложенном часто мутирующем состоянии: канвас, scene graph, конструкторы. Nano Stores нужен там, где состояние делят несколько фреймворков: Astro и микрофронтенды.

Важно держать в голове общую границу: ни один из четырёх не предназначен для серверных данных. Список с сервера, профиль, цены это серверное состояние, и его держит TanStack Query с кэшем и инвалидацией. Лёгкие сторы отвечают за клиентское состояние: выбранный инструмент, открытые панели, черновики, настройки UI. Связка лёгкого стора и Query даёт чистое разделение ответственности.

Когда задача не диктует модель явно, разумно начать с Zustand как самого универсального и менее всего удивляющего нового человека в команде. Переход на Jotai, Valtio или Nano Stores оправдан, когда конкретный сценарий совпал с сильной стороной именно того стора.

Связь с другими темами

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

• Zustand — Единый стор и селекторы. Точка отсчёта, с которой сравниваются остальные
• Jotai — Атомарная модель и граф зависимостей вместо единого стора
• Valtio — Прямая мутация и иммутабельный снимок вместо явного set

Итог

• Все четыре стора лёгкие и без Provider, но ментальные модели у них разные
• Zustand: единый стор, действия внутри, ре-рендеры режут селекторы. Универсальная рабочая лошадка
• Jotai: состояние из атомов, граф зависимостей строится сам. Хорош для множества мелких связанных кусков
• Valtio: прямая мутация объекта и иммутабельный снимок. Силён на глубоко вложенном состоянии
• Nano Stores: framework-agnostic атом в сотни байт. Силён на стыке нескольких фреймворков и Astro
• Выбор идёт по ментальной модели и сценарию, а не по абстрактному рейтингу лучшего стора

Связанные уроки

• sm-17-zustand — Zustand это точка отсчёта сравнения, поэтому его модель нужно знать заранее
• sm-18-jotai — Jotai с его атомарной моделью один из четырёх участников сравнения
• sm-19-valtio — Valtio с proxy-моделью прямой мутации тоже участвует в сравнении