PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

В каком state будешь хранить данные?

Продвинутые темы

Выбор места хранения состояния зависит от его типа: локальное — в компоненте, общее клиентское — в Context/стейт-менеджере, серверное — в кеше запросов, URL-состояние — в адресной строке.

Куда что класть

Локальное состояние компонента

useState/useReducer — открыт ли дропдаун, значение поля, вкладка.

const [isOpen, setIsOpen] = useState(false);

Общее клиентское состояние

  • Context — редко меняющееся (тема, локаль, авторизованный пользователь).
  • Стейт-менеджер (Redux/Zustand) — сложное состояние, много источников изменений.

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

TanStack Query/SWR — данные с бэкенда (список товаров, профиль). Не держать их в Redux — у них свой кеш, рефетч, инвалидация.

URL-состояние

Фильтры, пагинация, поиск — в query-параметрах URL (шарится, работает back/forward).

/products?category=phones&page=2

Форма

React Hook Form / Formik или локальный state.

Принцип

Держать состояние как можно ближе к месту использования; поднимать/глобализировать только при реальной необходимости.

Коротко для собеседования

Локальное состояние — в компоненте (useState), общее редко меняющееся — Context, сложное общее — стейт-менеджер (Redux/Zustand), серверные данные — TanStack Query (свой кеш), фильтры/пагинация — в URL. Принцип: держать состояние ближе к использованию, глобализировать по необходимости.

Другие вопросы раздела