Можно ли хранить в ref данные, помимо ссылок на DOM-элементы?

Что такое ref:
Ref — это объект с свойством current, которое может содержать любое значение. В отличие от состояния, изменение ref не вызывает повторный рендер компонента.

Что можно хранить в ref:

• Ссылки на DOM-элементы

• Таймеры и интервалы

• Любые мутабельные значения

• Предыдущие значения состояния

• Сложные вычисления, которые не должны триггерить рендер

Пример использования:

function TimerComponent() {
  const intervalRef = useRef(null);
  
  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      console.log('Timer tick');
    }, 1000);
  };
  
  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };
  
  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

Важные особенности:

• Изменение ref не вызывает ререндер

• Ref сохраняется между рендерами компонента

• Значение ref доступно немедленно после обновления

Когда использовать ref вместо state:

• Для значений, которые не влияют на отображение

• Для хранения предыдущих значений

• Для таймеров и подписок на события