Как управлять состоянием в React-приложении — Context, Redux, Zustand, серверное состояние?
- Когда нужен Redux?
- Чем серверное состояние отличается от клиентского?
Сначала — локальное состояние и подъём к общему предку. Context — передать редко меняющиеся данные глубоко (тема, пользователь, язык) без прокидывания props. Глобальное хранилище (Redux Toolkit, Zustand) — сложное клиентское состояние, которое меняют многие компоненты. Серверное состояние (данные из API) — отдельная задача: TanStack Query, RTK Query кэшируют, обновляют и дедуплицируют запросы.
- Context перерисовывает всех потребителей при изменении значения
- Значительная часть «глобального состояния» — на деле кэш серверных данных
- Состояние формы — локально или react-hook-form
А ещё Состояние в URL (фильтры, страница) — им можно поделиться ссылкой
Подробно
Виды состояния:
- локальное UI — открыт ли попап, текст в поле: useState;
- общее клиентское — корзина, настройки: подъём, Context или стор;
- серверное — копия данных бэкенда, которая устаревает: библиотека запросов с кэшем и инвалидацией;
- URL — фильтры, сортировка, номер страницы.
Context — механизм передачи, а не хранилище: изменение значения перерисовывает всех, кто его читает. Для часто меняющихся данных — разделять контексты или брать стор с подписками на части состояния.
Redux Toolkit — предсказуемые обновления через действия и редьюсеры, DevTools с историей; оправдан в больших приложениях с командой. Zustand — минималистичный стор с селекторами.
TanStack Query снимает основную боль: загрузка, ошибки, повторы, кэш, фоновое обновление, отмена — без ручных useEffect.
Что хотят услышать
- Разделение видов состояния.
- Когда хватает локального и Context.
- Роль сторов и библиотек серверного состояния.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Всё состояние сразу класть в Redux, включая серверные данные, поля форм и флаги модалок
- ✓Сначала локальный state; Context — для редких изменений, Zustand — для сложного, сервер — отдельно
- ✗Context — лучшее место для часто меняющихся данных форм
- ✗Данные с сервера стоит хранить в useState каждого компонента и грузить в его useEffect
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.