foundation

Локальное и глобальное состояние

Держите состояние рядом с владельцем, пока удалённые потребители не требуют общей координации.

Локальное состояние живёт в компоненте или небольшом поддереве: флаги открытия, hover, фокус поля, анимация. Глобальное координирует удалённые потребители: профиль пользователя, тема, корзина, feature flags на разных маршрутах.

| Сигнал | Локально | Глобально | |--------|----------|-----------| | Потребители | Один компонент | Много удалённых деревьев | | Срок жизни | mount/unmount | Сессия приложения или дольше | | Отладка | Область компонента | Нужен time-travel или логи | | URL | Эфемерный UI | Шаринг или закладки → подумайте об URL |

Поднимайте состояние только когда соседу нужно то же значение. Context может заменить store для средней области без церемоний Redux — но следите за шириной ре-рендеров.

					// Локально: только этот dropdown
function Menu() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(!open)}>Toggle</button>;
}
				

На интервью: обоснуйте, почему флаг открытия dropdown не должен жить в Redux.

Типовые ошибки: глобальный store для каждого `useState`, prop drilling на десять уровней там, где хватит context, context, ре-рендерящий всё дерево при любом изменении.

Компромисс: простота у владельца против цены координации в масштабе.

Чеклист:

  • По умолчанию локально; повышайте осознанно.
  • URL для навигационного состояния, которым делятся.
  • Context для средней области со стабильными разрезами.
  • Глобальный store для доменной координации между маршрутами.