Можно ли хранить произвольные данные в рефах, не связанные с DOM? Как это работает?

Что такое useRef и как он работает

useRef — это хук React, который возвращает мутабельный объект с единственным свойством current. В отличие от useState, изменение значения current не вызывает повторный рендер компонента. Это делает useRef идеальным для хранения данных, которые должны сохраняться между рендерами, но не влияют на UI.

Хранение произвольных данных

Помимо ссылок на DOM-элементы, useRef может хранить любые данные: числа, строки, объекты, функции, экземпляры классов. Например, можно хранить идентификатор таймера, предыдущее значение пропса или ссылку на внешний сервис.

import { useRef, useEffect } from 'react';

function Timer() {
  const timerRef = useRef(null);
  const countRef = useRef(0);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      countRef.current += 1;
      console.log('Count:', countRef.current);
    }, 1000);

    return () => clearInterval(timerRef.current);
  }, []);

  return <div>Check console</div>;
}

Когда это полезно

• Хранение таймеров и интервалов для их последующей очистки
• Сохранение предыдущих значений пропсов или состояния для сравнения
• Хранение ссылок на внешние библиотеки или экземпляры классов
• Кеширование результатов вычислений без лишних рендеров

Вывод

useRef — это мощный инструмент для хранения мутируемых данных, которые не должны влиять на рендер. Используйте его для таймеров, предыдущих значений и любых данных, которые нужно сохранять между рендерами без вызова обновления компонента.