PassFront
  1. PassFront
  2. База знаний
  3. Контекст и State managers

Что такое state manager в React?

Контекст и State managers

State manager (стейт-менеджер) — библиотека для хранения и обновления состояния приложения вне дерева компонентов, с подписками компонентов на нужные им куски данных.

Какую проблему решает

С ростом приложения появляется состояние, нужное многим несвязанным компонентам: корзина, текущий пользователь, уведомления. Средствами React это решается подъёмом state к общему родителю и контекстом, но: состояние «стекает» в корень, любой апдейт контекста рендерит всех потребителей, логика обновлений размазывается.

Стейт-менеджер выносит состояние в стор:

  • компоненты подписываются точечно (селекторами) — рендерится только тот, чьи данные изменились;
  • логика обновлений централизована и тестируема отдельно от UI;
  • девтулзы: история экшенов, time travel, снапшоты.

Основные представители

// Zustand — минималистичный стор
const useCart = create((set) => ({
  items: [],
  add: (item) => set((s) => ({ items: [...s.items, item] })),
}));

const Badge = () => {
  const count = useCart((s) => s.items.length); // точечная подписка
  return <span>{count}</span>;
};
  • Redux Toolkit — строгий однонаправленный поток (actions → reducers), богатые девтулзы; стандарт больших команд.
  • Zustand — тот же поток без бойлерплейта; популярный дефолт сегодня.
  • MobX — реактивные наблюдаемые объекты, автоподписки.
  • Jotai — атомарная модель «много маленьких состояний» (Recoil, где эта модель появилась, в 2025 году архивирован).

Разграничение

Серверные данные (списки, профили) — это кеш, им занимаются TanStack Query/SWR. Стейт-менеджеру остаётся клиентское состояние: UI-флаги, корзина, черновики. Из-за этого во многих приложениях стейт-менеджер вообще не нужен — хватает useState + Context + React Query.

Коротко для собеседования

Стейт-менеджер хранит общее состояние вне дерева компонентов с точечными подписками и централизованной логикой (Redux Toolkit, Zustand, MobX). Нужен для сложного клиентского состояния; серверные данные лучше держать в React Query, а маленьким приложениям хватает useState и контекста.

Другие вопросы раздела