Как выбрать подход к управлению состоянием в React?

Question

Accepted Answer

Подбирайте инструмент в соответствии с **типом** состояния, а не автоматически обращайтесь к глобальному store. Большинство проблем с "глобальным состоянием" — это просто неправильный инструмент для задачи.

## Почему это важно

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## Самый важный вывод: server state ≠ client state

Данные из API — это **кеш** удалённых данных, а не состояние, которым вы владеете. Помещение этого в Redux означает, что вы вручную обрабатываете загрузку, кеширование, повторное получение данных и инвалидацию — болезненно и чревато ошибками. Библиотека для server state делает всё это:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Рекомендации

- Сохраняйте состояние как можно более **локальным**; размещайте его рядом с местом, где оно используется.
- Не помещайте быстро меняющиеся значения в **Context** (это вызывает перерендеринг всех потребителей).
- Для общего состояния клиента с частыми обновлениями предпочитайте store с **selective subscriptions** (Zustand/Jotai), чтобы компоненты перерендерились только для того slice, который они читают.
- Используйте Redux Toolkit, когда вам нужны его devtools/middleware/структура для действительно сложного общего состояния.

Основной навык — это **минимизация и правильное размещение** состояния, а не выбор библиотеки.