Хук useRef

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

• Фокус елемента під час події, виділення тексту.
• Контроль програвання медіаконтенту.
• Інтеграція з DOM-бібліотеками.
• Доступ до DOM-властивостей, значення яких неможливо отримати по-іншому - розміри елемента, значення скрола тощо.

import { useRef } from "react";

const App = () => {
  const btnRef = useRef();

  return <button ref={btnRef}>Button with ref</button>;
};