Зачем использовать ref для мутабельных данных

Определение

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

Почему не state

Если использовать state:

1. каждое изменение вызовет ререндер

2. UI будет обновляться без необходимости

3. возможны проблемы с производительностью

Типичные кейсы для ref

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

2. Счётчики событий

3. Предыдущее значение пропса или state

4. Флаги жизненного цикла

Пример: предыдущее значение

const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

Пример: таймер

const timerId = useRef(null);

timerId.current = setTimeout(() => {
  // логика
}, 1000);

Важный нюанс

1. Изменение ref.current не инициирует ререндер

2. Значение доступно сразу

3. ref живёт столько же, сколько компонент

Вывод

ref — это инструмент для управления мутабельным состоянием вне рендера. Он нужен, когда важна производительность и контроль, а не отображение данных.