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

Важно начать с ключевого ограничения: каждый React root полностью изолирован.

Почему нельзя напрямую

1. Context работает только внутри одного дерева.

2. props не могут “перепрыгивать” между root.

3. React не предоставляет глобального механизма синхронизации между деревьями.

Базовый принцип синхронизации

Перед деталями зафиксируем схему:

1. Есть единый источник состояния.

2. Оба React-дерева читают данные из него.

3. Изменения в источнике уведомляют оба дерева.

4. Каждое дерево инициирует свой ререндер.

Основные подходы

1. External store

Самый универсальный и правильный вариант.

// общий стор
store.setState({ theme: "dark" });

// в каждом React-дереве
const theme = useSyncExternalStore(
  store.subscribe,
  store.getState
);

Плюсы:

1. Чёткая архитектура.

2. Контролируемые обновления.

3. Масштабируемость.

2. State-менеджеры

Redux, Zustand, MobX:

1. Один стор на приложение.

2. Несколько React root подписываются на него.

3. Синхронизация происходит автоматически.

3. Браузерные механизмы

Используются реже, но возможны:

1. localStorage + событие storage.

2. BroadcastChannel.

3. window.postMessage.

Типичные ошибки

1. Пытаться пробрасывать данные напрямую между деревьями.

2. Дублировать состояние и “ручками” держать его в синхронизации.

3. Делать кросс-вызовы компонентов из разных root.

Вывод

Синхронизация между React-деревьями возможна только через внешний источник состояния, который выступает единой точкой истины.