Современные тренды в State Management: Zustand, Jotai и сигналы

Сегодня мы разберемся, какие инструменты для управления состоянием в 2025 году заслуживают вашего внимания. Я расскажу о трех ключевых подходах, это Zustand, Jotai и сигналах и помогу выбрать оптимальный вариант для вашего проекта. Статья будет полезна как новичкам, так и опытным разработчикам. Здесь вы найдете примеры кода, сравнительные таблицы и личные рекомендации.

Почему State Management?

Любое современное веб-приложение это сложная система компонентов, которые должны обмениваться данными. Без продуманного state management ваш код быстро превратится в лапшу из пропсов и коллбэков. Раньше мы использовали Redux, но сегодня появились более легкие и гибкие решения. Давайте разбираться, чем они отличаются.

Zustand: минимализм и производительность

Что это?

Zustand (нем. «состояние») библиотека от создателя React-spring Пола Хендрикса. Ее фишка, это простота и отсутствие лишнего кода.

Установка:

npm install zustand

Пример использования:

Создаем хранилище:

import create from 'zustand';

const useCartStore = create((set) => ({
  items: [],
  addItem: (product) => 
    set((state) => ({ items: [...state.items, product] })),
  clearCart: () => set({ items: [] }),
}));

Используем в компоненте:

function CartButton() {
  const { items, addItem } = useCartStore();
  return (
    <button onClick={() => addItem({ id: Date.now() })}>
      Добавить ({items.length})
    </button>
  );
}

Плюсы:

• Минимум бойлерплейта
• Встроенная поддержка middleware (например, для логирования)
• Не требует оберток в Context.Provider

Минусы:

• Может стать громоздким в очень больших проектах

Jotai: атомарный подход

Что это?

Jotai (яп. «состояние») вдохновлен Recoil, но проще в освоении. Его ключевая концепция атомы, независимые кусочки состояния, которые можно комбинировать.

Установка:

npm install jotai

Пример:

Создаем атом:

import { atom, useAtom } from 'jotai';

const darkModeAtom = atom(false);
const userAtom = atom({ name: 'Максим', role: 'admin' });

Используем в компоненте:

function ThemeToggle() {
  const [isDarkMode, setDarkMode] = useAtom(darkModeAtom);
  return (
    <button onClick={() => setDarkMode(!isDarkMode)}>
      {isDarkMode ? '🌙' : '☀️'}
    </button>
  );
}

Плюсы:

• Идеален для микроменеджмента состояния
• Автоматическая оптимизация перерендеров
• Легко интегрируется с Suspense и Concurrent Mode

Минусы:

• Требует понимания атомарной модели

Сигналы: будущее reactivity?

Сигналы подход, популяризированный Solid.js и Preact. В отличие от React-хуков, они обновляют компоненты точечно, без лишних ререндеров.

Установка (на примере Preact Signals):

npm install @preact/signals-react

Пример:

import { signal, computed } from "@preact/signals-react";

const count = signal(0);
const doubleCount = computed(() => count.value * 2);

function Counter() {
  return (
    <button onClick={() => count.value++}>
      {count} (удвоено: {doubleCount})
    </button>
  );
}

Плюсы:

• Максимальная производительность
• Нет виртуального DOM — обновления мгновенные
• Простой синтаксис

Минусы:

• Меньше совместимость с React-экосистемой

Сравнительная таблица: Zustand или Jotai или сигналы

Личные рекомендации

1. Выбирайте Zustand, если:
   • Нужен быстрый старт без сложной настройки
   • Работаете над MVP или небольшим SPA
2. Выбирайте Jotai, если:
   • Состояние дробится на множество атомов
   • Требуется глубокая интеграция с React-фичами
3. Выбирайте сигналы, если:
   • Критична производительность (например, дашборды в реальном времени)
   • Готовы работать с менее распространенным подходом

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

А какой подход предпочитаете вы? Делитесь в комментах.