Хук useRef

дозволяють отримати прямий доступ до DOM-вузлів або React-елементів із шаблону компонента. Вони використовуються якщо необхідно звернутися до DOM-методів та властивостей елемента. Рефи це не стан, тобто вони не реактивні, тому зміна значення рефа не впливає на оновлення компонента і не викликає повторний рендер.

Фокус елемента під час події, виділення тексту.

Контроль програвання медіаконтенту.

Інтеграція з DOM-бібліотеками.

Доступ до DOM-властивостей, значення яких неможливо отримати по-іншому - розміри елемента, значення скрола тощо.

import { useEffect, useRef } from "react";
const App = () => {
const valueRef = useRef(0);
useEffect(() => {
// Виконається лише один раз під час монтування.
// Наступні оновлення значення рефа не
// викличуть оновлення компонента
console.log(valueRef.current);
});
const handleClick = () => {
valueRef.current += 1;
};
return <button onClick={handleClick}>Click to update ref value</button>;
};