Чем useRef отличается от useState?

Question

useState используется для хранения данных, изменение которых должно вызывать перерендер компонента. useRef хранит изменяемое значение, изменение которого не вызывает перерендер. useRef часто применяют для доступа к DOM-элементам или для хранения технических значений (таймеры, предыдущие значения). Выбор зависит от того, влияет ли изменение значения на отображение UI.

YeaHub · Accepted Answer

Хотя useRef и useState могут хранить данные между рендерами, их назначение разное.ОпределениеuseState — хук для хранения состояния, влияющего на UI.useRef — хук для хранения изменяемой ссылки, не влияющей на рендер.useStateconst [count, setCount] = useState(0);

setCount(count + 1); // вызывает перерендер
ОсобенностиИзменение состояния вызывает повторный рендер.Используется для данных, отображаемых в UI.Обновления могут батчиться.useRefconst renderCount = useRef(0);

renderCount.current += 1; // перерендер не вызывается
ОсобенностиЗначение хранится в ref.current.Изменение current не вызывает рендер.Значение сохраняется между рендерами.Типичные сценарии для useRefДоступ к DOM-элементам.Хранение setTimeout / setInterval id.Хранение предыдущего значения состояния.Флаги и счётчики, не влияющие на UI.ВыводuseState — для данных интерфейса, useRef — для технических и служебных значений, которые не должны вызывать перерендер.