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