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

Хотя useRef и useState могут хранить данные между рендерами, их назначение разное.

Определение

• useState — хук для хранения состояния, влияющего на UI.

• useRef — хук для хранения изменяемой ссылки, не влияющей на рендер.

useState

const [count, setCount] = useState(0);

setCount(count + 1); // вызывает перерендер

Особенности

1. Изменение состояния вызывает повторный рендер.

2. Используется для данных, отображаемых в UI.

3. Обновления могут батчиться.

useRef

const renderCount = useRef(0);

renderCount.current += 1; // перерендер не вызывается

Особенности

1. Значение хранится в ref.current.

2. Изменение current не вызывает рендер.

3. Значение сохраняется между рендерами.

Типичные сценарии для useRef

1. Доступ к DOM-элементам.

2. Хранение setTimeout / setInterval id.

3. Хранение предыдущего значения состояния.

4. Флаги и счётчики, не влияющие на UI.

Вывод

useState — для данных интерфейса, useRef — для технических и служебных значений, которые не должны вызывать перерендер.