useRef — що це, хук посилань та робота з DOM в React

Що таке useRef в React

useRef — це хук, доданий в React 16.8, який повертає мутований ref-об’єкт з єдиною властивістю .current. Початкове значення присвоюється .current при монтуванні компонента. Головна відмінність від звичайної змінної — ref-об’єкт переживає ререндери: при повторному рендері React не перестворює ref, а повертає той самий об’єкт.

Всередині useRef використовує той самий механізм, що й useState та useEffect — зв’язаний список хуків на fiber-вузлі. Однак на відміну від useState, React не відстежує зміни ref-об’єкта, не ставить оновлення в чергу та не планує ререндер. Це робить useRef надзвичайно легким хуком, який не впливає на продуктивність навіть при частих змінах.

За даними React Team — Hooks FAQ (2025), useRef — це по суті «коробка», яка зберігає значення. Синтаксичний цукор: const ref = useRef(initialValue) еквівалентний const ref = { current: initialValue } з тією відмінністю, що React гарантує, що ref-об’єкт буде тим самим при кожному рендері. Жодної магії — просто стабільне посилання, кероване React.

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 спочатку
    // countRef.current = 5 після мутації
    // Ререндер не відбувається!
}

Доступ до DOM-елементів через useRef

Найпоширеніший сценарій використання useRef — отримання прямого доступу до DOM-елемента. React присвоює elementRef.current посилання на DOM-вузол після монтування компонента. Це необхідно для фокусування input, вимірювання розмірів елемента, інтеграції з анімаційними бібліотеками та бібліотеками, які не використовують React-рендеринг.

React автоматично керує ref-посиланнями на DOM: при монтуванні присвоює актуальний DOM-вузол, при демонтуванні обнулює (встановлює null). Це гарантує, що в .current завжди актуальне значення, та запобігає витокам пам’яті через «висячі» посилання на видалені елементи. Жодного ручного очищення не потрібно.

function AutoFocusInput() {
    const inputRef = useRef(null);

    useEffect(() => {
        // Фокусувати input після монтування компонента
        inputRef.current?.focus();
    }, []);

    return <input ref={inputRef} type="text" />;
}

За даними React — Refs and DOM documentation (2025), не використовуй ref для декларативних операцій — відкриття/закриття модалок, керування видимістю. Для цих цілей існують state та пропси. Refs призначені для імперативних операцій, які не можна виразити декларативно: фокус, виділення тексту, інтеграція зі сторонніми бібліотеками.

Зберігання мутованих значень без ререндерів

Другий за важливістю сценарій — зберігання довільних значень, які мають зберігатися між рендерами, але зміна яких не повинна викликати ререндер. Типові приклади: ідентифікатори таймерів (setInterval/setTimeout), прапорці для скасування запитів, попередні значення пропсів для порівняння та будь-які дані, що не впливають на виведення UI.

Особливо це корисно в useEffect: useRef зберігає ідентифікатор таймера, а cleanup його очищає. Якщо зберігати timerId в useState, кожен виклик setTimerId викликав би зайвий ререндер, який не потрібен ні для логіки, ні для UI. useRef вирішує цю проблему без overhead та без зайвих перемальовувань.

function Timer() {
    const intervalRef = useRef(null);

    const start = () => {
        intervalRef.current = setInterval(() => {
            console.log('тік');
        }, 1000);
    };

    const stop = () => {
        clearInterval(intervalRef.current);
    };

    useEffect(() => stop, []);

    return <><button onClick={start}>Start</button><button onClick={stop}>Stop</button></>;
}

useRef vs useState: коли що використовувати

Головна дилема — вибір між useRef та useState — вирішується одним питанням: «Чи потрібен ререндер при зміні значення?«. Якщо так — useState. Якщо ні — useRef. useState зберігає стан, що впливає на виведення компонента; useRef зберігає дані, потрібні для внутрішньої логіки, але не впливає на UI.

На практиці розробники часто використовують useRef для зберігання колбеків, щоб уникнути проблем із замиканнями. Наприклад, якщо useEffect підписується на подію, і всередині колбека потрібен актуальний state — зберігай колбек в useRef. При кожному рендері оновлюй ref.current новою функцією, і ефект буде викликати завжди свіжий колбек без перепідписки.

Існує anti-pattern: використовувати useRef для даних, які потрібні в JSX, але зміна яких не повинна викликати ререндер. Це призводить до розсинхронізації — UI показує старі дані, хоча ref.current вже новий. Якщо значення відображається в UI — використовуй useState. Якщо лише використовується всередині логіки — useRef.

useRef в комбінації з useEffect

Зв’язка useRef + useEffect — стандартний патерн для відстеження попередніх значень пропсів. Зберігай попереднє значення в ref, порівнюй з поточним в useEffect та приймай рішення на основі різниці. Це особливо корисно при анімаціях, коли потрібно знати, яке значення було до зміни.

function PriceDisplay({ price }) {
    const prevPriceRef = useRef(price);

    useEffect(() => {
        const prevPrice = prevPriceRef.current;
        if (price > prevPrice) {
            animateUp();
        } else if (price < prevPrice) {
            animateDown();
        }
        prevPriceRef.current = price;
    }, [price]);

    return <span>${price}</span>;
}

За даними React Documentation — Hooks FAQ (2025), цей патерн називають «previous value pattern». Він працює, тому що useRef зберігає значення між рендерами, а useEffect виконується після фіксації змін. Спочатку оновлюється DOM з новим price, потім useEffect порівнює з попереднім (яке ще зберігається в ref) та оновлює ref.current до поточного значення.

Типові помилки з useRef

Найчастіша помилка — читання ref.current в рендер-фазі для обчислення JSX. Оскільки зміна ref.current не викликає ререндер, компонент може використовувати застаріле значення. Якщо значення .current бере участь у виведенні UI — використовуй useState. Якщо потрібно синхронізувати ref та state, використовуй useEffect для оновлення state з ref.

• Ref в JSX — читання ref.current всередині рендер-функції призводить до розсинхронізації UI та даних.
• Ref як залежність useEffect — ref.current не повинен бути в масиві залежностей; React не відстежує його зміни.
• Забутий null check — при демонтуванні ref.current стає null; перевіряй перед доступом.
• Зберігання функцій в ref — оновлюй ref.current при кожному рендері, якщо використовуєш патерн зі свіжим колбеком.

// ❌ Не читай ref.current під час рендеру для відображення
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // НЕ оновиться при мутації
}

// ✅ Використовуй state для відображення, ref для логіки
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

Ще одна поширена помилка — використання useRef як єдиного способу зберігання стану в компоненті, коли дані все-таки впливають на UI. Розробники обирають useRef, щоб уникнути «зайвих» ререндерів, але в результаті отримують UI, який не оновлюється. Правильний підхід: використовуй useState для UI-даних і useRef лише для допоміжних значень, що не беруть участі в рендерингу.