Как работает useRef и что он возвращает?

Question

useRef возвращает объект с полем current.Значение current сохраняется между рендерами.Изменение current не вызывает перерендер.Чаще всего useRef используют для доступа к DOM или хранения служебных данных.

YeaHub · Accepted Answer

useRef — это способ хранить данные, которые переживают рендер, но не влияют на UI.ОпределениеuseRef — это хук, который возвращает стабильный объект вида { current: value }.const inputRef = useRef(null);
Поведение currentОсобенности:значение сохраняется между рендерамиизменение current не вызывает обновление компонентассылка на объект остаётся неизменнойДоступ к DOMЧастый сценарий — работа с DOM-элементами:<input ref={inputRef} />
// inputRef.current указывает на DOM-элемент
Хранение служебных данныхuseRef используют для:таймеровпредыдущих значенийфлагов и счётчиковЧем useRef отличается от useStateВ отличие от useState:useRef не вызывает перерендерподходит для данных, не влияющих на отображениеКраткий выводuseRef хранит мутабельные данные между рендерами без влияния на UI. Это удобный инструмент для работы с DOM и служебным состоянием.