Как синхронизировать состояние между двумя разными React-деревьями?

Question

Два разных React-дерева не могут напрямую делиться state или context. Для синхронизации между ними используют внешний источник истины: external store, state-менеджер или браузерные механизмы. Оба дерева подписываются на изменения этого источника и обновляются при его изменении. Таким образом синхронизация происходит не через React, а через общий внешний слой.

YeaHub · Accepted Answer

Важно начать с ключевого ограничения: каждый React root полностью изолирован.Почему нельзя напрямуюContext работает только внутри одного дерева.props не могут “перепрыгивать” между root.React не предоставляет глобального механизма синхронизации между деревьями.Базовый принцип синхронизацииПеред деталями зафиксируем схему:Есть единый источник состояния.Оба React-дерева читают данные из него.Изменения в источнике уведомляют оба дерева.Каждое дерево инициирует свой ререндер.Основные подходы1. External storeСамый универсальный и правильный вариант.// общий стор
store.setState({ theme: "dark" });
// в каждом React-дереве
const theme = useSyncExternalStore(
  store.subscribe,
  store.getState
);
Плюсы:Чёткая архитектура.Контролируемые обновления.Масштабируемость.2. State-менеджерыRedux, Zustand, MobX:Один стор на приложение.Несколько React root подписываются на него.Синхронизация происходит автоматически.3. Браузерные механизмыИспользуются реже, но возможны:localStorage + событие storage.BroadcastChannel.window.postMessage.Типичные ошибкиПытаться пробрасывать данные напрямую между деревьями.Дублировать состояние и “ручками” держать его в синхронизации.Делать кросс-вызовы компонентов из разных root.ВыводСинхронизация между React-деревьями возможна только через внешний источник состояния, который выступает единой точкой истины.