Jotai, Zustand и Context: что и когда использовать

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

Этот API встроен в React, не требует зависимостей и ясно сообщает команде: «это значение доступно глобально».

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

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

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

Модель на основе хранилища знакома пользователям Redux и объединяет связанное состояние в одном месте.

Хранилища Zustand экспортируют хук useBoundStore. Передайте селектор: useStore(state => state.cart), чтобы подписаться только на срез корзины. Компоненты с разными селекторами независимы: компонент с селектором корзины не рендерится повторно при изменении имени пользователя.

Это обеспечивает Zustand эффективность на уровне отдельных срезов, сравнимую с Jotai, но с более императивным API.

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

Модель «отдельный атом для каждого значения» естественна, когда разным частям дерева компонентов нужны совершенно разные срезы состояния.

Сборка Jotai меньше сборки Zustand, потому что Jotai предоставляет меньше возможностей: в нём нет системы промежуточного ПО и встроенных инструментов разработчика. API Jotai близко напоминает useState: useAtom возвращает [value, setter], что сокращает время обучения разработчиков React.

API Zustand больше похож на Redux: определите хранилище, экспортируйте хук и используйте селекторы. Обе библиотеки обеспечивают отличную поддержку TypeScript.

И Jotai, и Zustand поддерживают серверный рендеринг при использовании подходящих стратегий восстановления состояния. Для SSR Jotai использует Provider с пользовательским хранилищем, а Zustand — createStore для серверных экземпляров.

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

В реальных приложениях часто сочетают все три решения: React Context для статической конфигурации (базовый URL API, флаги возможностей), Jotai или Zustand для интерактивного состояния клиента и React Query или SWR для данных, полученных с сервера.

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

Если у вашей команды есть опыт работы с Redux, модель хранилища Zustand покажется естественной. Если ваша команда тесно связана с React, API Jotai, похожий на useState, обеспечит наиболее плавное обучение.

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

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

Для сложных данных сервера с кэшированием, фоновым обновлением и оптимистическими изменениями объедините любую библиотеку состояния клиента с React Query.

Используйте контекст для статических или редко изменяющихся глобальных значений. Используйте Zustand для централизованного состояния приложения с умеренной частотой обновлений. Используйте Jotai для мелкозернистого реактивного состояния на уровне отдельных атомов с множеством независимых подписок. Для состояния сервера используйте React Query или SWR.

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

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

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