Как связать состояние вне React (external store) с React-рендерингом?

Связка внешнего состояния и React-рендеринга строится вокруг одной идеи: внешний стор должен уметь уведомлять React об изменениях.

Что такое external store

External store — это источник состояния, который живёт вне React (обычный JS-объект, singleton, класс, Redux-store, кастомный стор).

Ключевая проблема:
React не подписывается на такие объекты автоматически.

Базовая схема интеграции

Перед деталями важно зафиксировать общий алгоритм:

1. Внешний стор хранит данные.

2. Внешний стор умеет уведомлять подписчиков об изменениях.

3. React-компонент подписывается на стор.

4. При уведомлении React инициирует ререндер.

Способы связки

1. Ручная подписка + локальный state

Самый простой, но “низкоуровневый” подход.

function useExternalStore(store) {
  const [, forceRender] = useState(0);

  useEffect(() => {
    return store.subscribe(() => {
      forceRender((v) => v + 1);
    });
  }, [store]);

  return store.getState();
}

1. forceRender используется только для запуска ререндера.

2. Реальное состояние берётся из стора.

Минусы:

• легко ошибиться

• плохо совместим с concurrent rendering

2. useSyncExternalStore (рекомендуемый способ)

Официальный API React для внешних сторов.

const state = useSyncExternalStore(
  store.subscribe,
  store.getState
);

Плюсы:

1. Корректно работает в StrictMode.

2. Безопасен для concurrent rendering.

3. Гарантирует консистентность данных.

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

Redux, Zustand, MobX уже реализуют эту логику:

1. Подписка инкапсулирована внутри библиотеки.

2. Компоненты получают готовые хуки (useSelector, useStore).

3. Минимизируются лишние ререндеры.

Вывод

Чтобы связать external store с React, нужно не менять данные напрямую, а встроить механизм подписки, который будет корректно инициировать ререндер — лучше всего через useSyncExternalStore.