Какой хук позволяет хранить состояние, но не вызывает ре-рендер компонента?

Что такое useRef?

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

Как это работает?

При вызове useRef(initialValue) возвращается объект вида { current: initialValue }. Вы можете свободно изменять current, и React не будет знать об этом, поэтому компонент не перерисуется. Это особенно полезно для:

• Хранения ссылок на DOM-элементы (например, для фокуса или измерения размеров).
• Сохранения предыдущих значений пропсов или состояния.
• Хранения таймеров или идентификаторов интервалов.

Пример кода

import React, { useRef, useState } from 'react';

function Counter() {
  const countRef = useRef(0); // храним счётчик без ре-рендера
  const [count, setCount] = useState(0); // обычное состояние

  const incrementRef = () => {
    countRef.current += 1;
    console.log('Ref count:', countRef.current);
  };

  const incrementState = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>State count: {count}</p>
      <button onClick={incrementState}>Increment state</button>
      <button onClick={incrementRef}>Increment ref (no re-render)</button>
    </div>
  );
}

В примере выше нажатие на вторую кнопку увеличивает countRef.current, но компонент не перерисовывается, поэтому на экране ничего не меняется. Это демонстрирует, что useRef не влияет на рендер.

Когда использовать?

Используйте useRef, когда нужно хранить данные, которые не должны вызывать обновление UI. Например, для хранения предыдущего значения пропса, чтобы сравнить его в useEffect, или для управления фокусом на инпуте. Если данные должны отображаться на экране, используйте useState.

Итог: useRef — это инструмент для хранения изменяемых значений без ре-рендеров. Он незаменим для работы с DOM и оптимизации производительности, когда обновление состояния не требуется.