> Где хранить состояние в React (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One, Сбер, SmartWay

Стек: React

> Пример ответа

В React состояние можно хранить в нескольких местах в зависимости от его назначения и области видимости:

Локальное состояние компонента - используется useState (в функциональных компонентах) или this.state (в классовых). Подходит для данных, которые не нужны за пределами компонента (например, значение инпута, открыт/закрыт модального окна).
Состояние, передаваемое через пропсы - если данные нужны дочерним компонентам, их поднимают (lifting state up) до общего родителя и передают через props.
Контекст (Context API) - для глобальных данных, которые требуются многим компонентам на разных уровнях (тема, авторизация, язык). Избегайте злоупотребления, так как контекст вызывает ререндер всех потребителей при изменении.
Внешние менеджеры состояния - Redux, Zustand, MobX, Recoil. Используются для сложного глобального состояния, частых обновлений из разных частей приложения (корзина, данные пользователя).
Серверное состояние - данные, получаемые с API. Для них лучше применять библиотеки вроде React Query (TanStack Query) или RTK Query, которые кешируют, синхронизируют и обновляют данные автоматически.
URL и localStorage/sessionStorage - состояние, которое должно сохраняться между сессиями (фильтры, настройки) или быть доступным по ссылке (параметры маршрута).

Правило выбора: начинайте с локального состояния. Если данные нужны нескольким компонентам - поднимите выше. Если это глобальные данные - используйте контекст или менеджер состояния. Для данных с сервера - специализированные библиотеки.