Управление состоянием

Основа с Middle

Локальное, глобальное и серверное состояние — Context, Redux Toolkit, Zustand, TanStack Query.

Первое правило — разделить состояние по природе:

вид	пример	инструмент
локальное	открыт ли выпадающий список	`useState`
общее клиентское	тема, корзина, авторизация	Context, Zustand, Redux Toolkit
серверное	список заказов	TanStack Query, RTK Query, SWR
в адресе	фильтры, номер страницы	параметры URL
формы	поля и ошибки	React Hook Form

Большинство «глобального состояния» на деле — кэш серверных данных; специализированные библиотеки дают кэширование, повторы, обновление в фоне и инвалидацию.
Context — передача данных вглубь, а не менеджер состояния: при изменении значения перерисовываются все подписчики.
Redux Toolkit — предсказуемость, devtools, строгая структура; хорош для больших команд. Zustand — минимум кода.
Не класть всё в глобальное хранилище: чем ближе состояние к месту использования, тем проще код.

Темы этапа

Context Основа
Передача данных вглубь дерева без проброса props — и почему это не менеджер состояния.
Серверное состояние — TanStack Query Основа
Загрузка, кэширование и обновление данных с сервера без самописных эффектов.
Redux Toolkit Альтернатива
Предсказуемое глобальное хранилище — слайсы, действия, селекторы.
Zustand Альтернатива
Минималистичное глобальное хранилище на хуках.

Разделяет состояние на локальное, глобальное, серверное, в URL и в формах и выбирает инструмент для каждого

Практика. Провести аудит состояния проекта и перенести фильтры в URL, данные сервера — в кэш запросов.

Практика. Описать правила работы с состоянием для команды с примерами и антипримерами.

Как управлять состоянием в React-приложении — Context, Redux, Zustand, серверное состояние? Junior
Сначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище…

Закрытая бета

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.