В экосистеме React существует множество подходов к управлению глобальным состоянием. Эти инструменты позволяют хранить и обновлять данные, которые должны быть доступны нескольким компонентам без передачи пропсов вручную по цепочке. Ниже перечислены наиболее популярные решения, включая их особенности, отличия, плюсы и минусы.

Context API (встроенный в React)

Описание:
Context API — это нативное средство React для передачи данных через дерево компонентов без необходимости явно передавать пропсы на каждом уровне.

Пример:

const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}

Плюсы:

• Встроен в React, не требует сторонних библиотек.

• Идеален для простых задач: тема, язык, авторизация.

• Отлично сочетается с useReducer для создания собственного Redux-подобного хранилища.

Минусы:

• При любом обновлении value, перерисовываются все потребители (даже если они не используют изменённое поле).

• Неэффективен для частых и точечных обновлений.

• Нельзя использовать селекторы по состоянию — нет оптимизации по частичному чтению.

Redux

Описание:
Redux — один из самых популярных инструментов для управления состоянием. Использует централизованное хранилище (store) и диспетчеризацию action через reducer.

Принципы:

1. Единое хранилище (Single source of truth).

2. Состояние только для чтения.

3. Изменения производятся через чистые функции (reducer).

Плюсы:

• Предсказуемость: всё состояние централизовано и изменяется через явные действия.

• Мощные DevTools: история действий, time-travel debugging.

• Поддержка middleware (например, для логирования, API и асинхронности).

• Широкая экосистема: Redux Toolkit, RTK Query.

Минусы:

• Много шаблонного кода (особенно без Redux Toolkit).

• Избыточность в маленьких проектах.

• Требует обёртки Provider, useSelector, useDispatch.

Redux Toolkit сильно упростил API и сделал Redux ближе к современному React.

Zustand

Описание:
Zustand — минималистичная, но мощная библиотека от создателей Jotai и React Spring. Не требует обёртки в Provider, использует обычные JavaScript-хранилища и хуки.

Пример:

const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));

Плюсы:

• Простота: всё на чистом JavaScript.

• Нет контекста — работает без React Context.

• Поддерживает селекторы (useStore(state => state.count)).

• Отличная производительность: обновляются только подписчики нужных данных.

• Поддерживает middleware, persist, devtools.

Минусы:

• Меньше инструментов для масштабных приложений (по сравнению с Redux).

• Меньшая экосистема (хотя быстро растёт).

Jotai

Описание:
Jotai — атомарное хранилище. Каждый кусочек состояния — это атом. Компоненты подписываются только на нужные атомы.

Пример:

const countAtom = atom(0);
function Counter() {
const \[count, setCount\] = useAtom(countAtom);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Плюсы:

• Атомарность: обновляется только то, что использует атом.

• Хорошая производительность.

• Удобен для композиции состояния.

• Поддержка асинхронных атомов и derived атомов.

• Нет необходимости в Provider (в большинстве случаев).

Минусы:

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

• Меньшая документация и сообщество по сравнению с Redux.

Recoil

Описание:
Разрабатывается Facebook, атомарная модель состояния, вдохновлённая принципами React Fiber и Concurrent Mode.

Особенности:

• Атомы (atom) — минимальные единицы состояния.

• Селекторы (selector) — производные значения.

• Хорошая интеграция с Suspense.

Плюсы:

• Высокая производительность за счёт изолированных обновлений.

• Удобная композиция и derived state.

• Встроенная поддержка асинхронности.

• Отличная интеграция с Concurrent Mode.

Минусы:

• Всё ещё в экспериментальном статусе.

• Меньшая экосистема и поддержка.

MobX

Описание:
MobX реализует реактивную модель: любые значения, помеченные как observable, автоматически обновляют подписчиков.

Пример:

class CounterStore {
@observable count = 0;
@action increment() {
this.count++;
}
}

Плюсы:

• Очень простой API и кривая обучения.

• Автоматическая реактивность.

• Высокая производительность без лишнего шаблонного кода.

Минусы:

• Менее предсказуемая модель, чем Redux.

• Магия observable может быть непрозрачной.

• Меньше контроля над изменениями состояния.

React Query (TanStack Query)

Описание:
Не столько про глобальное состояние, сколько про кэширование и синхронизацию данных с сервером. Отлично заменяет ручное управление API-запросами.

Плюсы:

• Умное кэширование.

• Поддержка background-refetch, polling, пагинации, invalidation.

• Отлично интегрируется с Suspense и SSR.

Минусы:

• Не для хранения пользовательского состояния (например, состояние формы, тем и т.п.).

• Необходимость в комбинации с другим state manager для локального состояния.

Сравнение в таблице

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