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

Question

ref используют для хранения данных, которые меняются со временем, но не должны вызывать ререндер. Это позволяет избежать лишних обновлений UI и повысить производительность. ref сохраняет значение между рендерами и доступен синхронно. React игнорирует изменения ref.current.

YeaHub · Accepted Answer

ОпределениеuseRef — это хук, который возвращает объект с полем current, предназначенный для хранения мутабельных значений.Почему не stateЕсли использовать state:каждое изменение вызовет ререндерUI будет обновляться без необходимостивозможны проблемы с производительностьюТипичные кейсы для refТаймеры и интервалыСчётчики событийПредыдущее значение пропса или stateФлаги жизненного циклаПример: предыдущее значениеconst prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);
Пример: таймерconst timerId = useRef(null);

timerId.current = setTimeout(() => {
  // логика
}, 1000);
Важный нюансИзменение ref.current не инициирует ререндерЗначение доступно сразуref живёт столько же, сколько компонентВыводref — это инструмент для управления мутабельным состоянием вне рендера. Он нужен, когда важна производительность и контроль, а не отображение данных.