Вопрос проверяет понимание границ React и способов интеграции внешнего состояния с React-рендерингом.
React не отслеживает изменения объектов вне своего state и props, поэтому напрямую на них не реагирует. Чтобы компонент обновлялся, нужно явно уведомлять React об изменениях: через подписку, обновление локального state или использование специальных хуков. На практике для этого применяют useSyncExternalStore, собственную систему подписок или state-менеджеры. Главное — при изменении внешнего объекта инициировать ререндер React.
React реагирует только на изменения, которые проходят через его механизм обновлений.
Перед тем как говорить о решении, важно понять причину:
React отслеживает только state и props.
Мутации обычных JS-объектов не вызывают ререндер.
Внешний объект может меняться без ведома React.
Перед использованием подхода нужно выбрать стратегию синхронизации.
Внешний объект уведомляет о своих изменениях.
В компоненте вызывается setState, чтобы инициировать ререндер.
useEffect(() => {
const unsubscribe = externalStore.subscribe(() => {
setTick((t) => t + 1); // форсируем ререндер
});
return unsubscribe;
}, []);
React предоставляет официальный API для внешних сторов.
Он корректно работает с concurrent rendering и strict mode.
Компонент автоматически обновляется при изменениях стора.
Redux, MobX, Zustand инкапсулируют подписки внутри себя.
Компоненту не нужно вручную управлять обновлениями.
Чтобы React-компонент реагировал на изменения внешнего объекта, нужно явно связать эти изменения с механизмом рендера React, чаще всего через подписки или useSyncExternalStore.