Хук useRef

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

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

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

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

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

import { useRef } from "react";
const App = () => {
const btnRef = useRef();
return <button ref={btnRef}>Button with ref</button>;
};