React useRef

Изменение ref не вызывает перерендер компонента.

В React ref используется для хранения мутабельного значения, которое не влияет на процесс рендера.

Почему так происходит

Когда вы используете useRef:

const myRef = useRef(0);

myRef — это объект вида:

{
  current: 0
}

Если изменить значение:

myRef.current = 5;

то:

• значение изменится
• но React не запустит повторный рендер

В отличие от useState

const [value, setValue] = useState(0);

setValue(5); // вызовет перерендер

Когда используют useRef

Обычно для:

• хранения DOM-элемента
• хранения значения между рендерами
• таймеров / интервалов
• кеширования данных
• предыдущего значения

Пример:

const renderCount = useRef(0);


useEffect(() => {
  renderCount.current += 1;
});

Компонент не будет перерендериваться из-за изменения renderCount.current.

Итог:

✅ Правило:

ref — для хранения данных без рендера,

state — для данных которые должны обновлять UI.

Anastasiia Berest

Senior Web UI Engineer

I'm a web development passionate about creating meaningful digital experiences.