Этап 5 из 12 · ≈ 4 ч

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

Основа с 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 Альтернатива
Минималистичное глобальное хранилище на хуках.

Критерии освоения

Middle ≈ 4 ч

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

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

Senior ≈ 4 ч

Обосновывает подход к состоянию для большого приложения и правила для команды

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

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все

Как управлять состоянием в React-приложении — Context, Redux, Zustand, серверное состояние?Junior

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

Полный разбор

Как создать хранилище Zustand и подписаться на его часть?Junior

create создаёт хук-хранилище: состояние и функции изменения в одном объекте, без провайдера. Компонент подписывается селектором — useCart(s => s.items.length) — и перерисовывается, только когда выбранная часть изменилась. Изменения — через set, неизменяемо…

Полный разбор

Как устроен Redux Toolkit — слайсы, селекторы, middleware?Middle

Redux — одно хранилище, состояние меняется только через action (объект «что произошло»), а reducer — чистая функция (state, action) → новое state: без побочных эффектов, поэтому изменения предсказуемы, воспроизводимы и видны в Redux DevTools (история…

Полный разбор

Как избежать лишних перерисовок при использовании Context и почему Context — не менеджер состояния?Middle

Все потребители контекста перерисовываются, когда value меняется по ссылке. Частая ошибка — объект в value создаётся заново на каждом рендере провайдера: value={{user, setUser}} — тогда перерисовываются все даже без изменений. Лечение: мемоизировать value…

Полный разбор

Почему не нужно хранить в state то, что можно вычислить из других данных?Middle

Если значение вычисляется из props или другого состояния (отфильтрованный список, сумма корзины, полное имя), его считают во время рендера, а не хранят в отдельном state. Дублирующее состояние нужно синхронизировать эффектами — это лишний рендер и источник…

Полный разбор

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования