Изменение состояния без повторного рендеринга / React

Каждый раз, когда состояния (useState, useReducer) компонента изменяются, весь компонент рендерится заново. Это означает, что текущий и каждый дочерний, зависимый от этого состояния компонент будет повторно перерисовывать себя.

В разработке может возникнуть необходимость поменять состояние, но не вызывать перерисовку компонента (-ов). В этом будет полезен хук useRef.

Хук React.useRef()— это функция, которая возвращает изменяемый объект ссылки. У этого объекта есть свойство под названием current. Доступ к значению, сохраненному с помощью хука useRef, можно получить или обновить через свойство current. Этот объект сохраняет значение в течение всего срока службы компонента.

const refValue = React.useRef("Initial value"); <-- initializing 

refValue.current = "new value"; <-- Assigning new value through 'current' property

console.log(refValue.current);  <-- Accessing values using 'current' property
>> "new value" <<

Оба хука и useState, и useRefмогут использоваться для сохранения состояния. Но обновление значений useStateприводит к повторному рендерингу компонента, тогда как для useRefне происходит повторного рендеринга при обновлении значения.

Также useRef используется для сохранения ссылки на элементы DOM-дерева. Но это уже совсем другая тема.

Ссылка на источник.