Как заставить React-компонент реагировать на изменения объекта, находящегося вне React?

Question

React не отслеживает изменения объектов вне своего state и props, поэтому напрямую на них не реагирует. Чтобы компонент обновлялся, нужно явно уведомлять React об изменениях: через подписку, обновление локального state или использование специальных хуков. На практике для этого применяют useSyncExternalStore, собственную систему подписок или state-менеджеры. Главное — при изменении внешнего объекта инициировать ререндер React.

YeaHub · Accepted Answer

React реагирует только на изменения, которые проходят через его механизм обновлений.Почему React не видит внешний объектПеред тем как говорить о решении, важно понять причину:React отслеживает только state и props.Мутации обычных JS-объектов не вызывают ререндер.Внешний объект может меняться без ведома React.Основные подходыПеред использованием подхода нужно выбрать стратегию синхронизации.1. Подписка + локальный stateВнешний объект уведомляет о своих изменениях.В компоненте вызывается setState, чтобы инициировать ререндер.useEffect(() => {
  const unsubscribe = externalStore.subscribe(() => {
    setTick((t) => t + 1); // форсируем ререндер
  });

return unsubscribe;
}, []);
2. useSyncExternalStoreReact предоставляет официальный API для внешних сторов.Он корректно работает с concurrent rendering и strict mode.Компонент автоматически обновляется при изменениях стора.3. State-менеджерыRedux, MobX, Zustand инкапсулируют подписки внутри себя.Компоненту не нужно вручную управлять обновлениями.ВыводЧтобы React-компонент реагировал на изменения внешнего объекта, нужно явно связать эти изменения с механизмом рендера React, чаще всего через подписки или useSyncExternalStore.