> Можно ли хранить данные в refs, которые не вызывают повторный рендер (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор

Стек: React

> Пример ответа

Да, в React можно хранить данные в refs (через useRef), которые не вызывают повторный рендер. В отличие от state, изменение значения ref не приводит к перерисовке компонента. Это полезно для хранения мутируемых данных, не влияющих на UI, например: идентификаторов таймеров, ссылок на DOM-элементы, флагов или промежуточных вычислений.

Пример:

JSX
import { useRef } from 'react';

function Timer() {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1; // изменение не вызывает рендер
    console.log(countRef.current);
  };

  return <button onClick={handleClick}>Нажми</button>;
}

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