Как связать внешний объект с React через useRef?

Question

useRef позволяет хранить ссылку на внешний объект между рендерами без их запуска. Через ref.current можно читать и изменять данные, но React не будет автоматически перерисовываться. Чтобы изменения отразились в UI, нужно дополнительно инициировать ререндер, например через useState или подписку. useRef подходит для хранения ссылок, а не реактивного состояния.

YeaHub · Accepted Answer

useRef часто используют неправильно, ожидая от него поведения useState.ОпределениеuseRef — это хук для хранения мутабельного значения, которое сохраняется между рендерами, но не влияет на рендеринг.Как useRef связывает внешний объектПеред деталями важно понять его роль:useRef — контейнер для ссылки.React не следит за изменениями ref.current.Пример использованияfunction Component({ externalObject }) {
  const objectRef = useRef(externalObject);

useEffect(() => {
    objectRef.current = externalObject;
  }, [externalObject]);

return null;
}
Ссылка на объект сохраняется между рендерами.Мутации objectRef.current не вызывают ререндер.Когда это полезноТаймеры, WebSocket, подписки.Кэш значений между рендерами.Интеграция с imperative API.Как отразить изменения в UIЕсли нужно показать изменения пользователю:Либо связать useRef с useState.Либо использовать подписку и useSyncExternalStore.objectRef.current.value = 42;
setTick((v) => v + 1); // инициируем ререндер
ВыводuseRef — это инструмент для хранения ссылок и мутабельных объектов, но не для реактивного состояния. Для UI-обновлений его всегда нужно комбинировать с механизмами рендера React.