Хук 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>; };