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 для доменной координации между маршрутами.