useRef — bu nədir, istinad hook-u və React-də DOM ilə iş

React-də useRef nədir

useRef — React 16.8-də əlavə edilmiş, tək .current xassəsi ilə mutasiya olunan ref obyekti qaytaran hookdur. İlkin dəyər komponentin montajı zamanı .current-a təyin edilir. Adi dəyişəndən əsas fərqi — ref obyekti yenidən renderləri ötüb keçir: təkrar render zamanı React refi yenidən yaratmır, eyni obyekti qaytarır.

useRef-in daxili implementasiyası useState və useEffect ilə eyni mexanizmdən — fiber qovşağında birləşdirilmiş hooklar siyahısından istifadə edir. Lakin useState-dən fərqli olaraq, React ref obyektinin dəyişmələrini izləmir, yeniləmələri növbəyə qoymur və yenidən render planlaşdırmır. Bu, useRef-i hətta tez-tez dəyişmələrdə belə performansa təsir etməyən son dərəcə yüngül hook edir.

React Team — Hooks FAQ (2025)-ə görə, useRef mahiyyətcə dəyər saxlayan “qutu”dur. Sintaktik şəkər: const ref = useRef(initialValue) const ref = { current: initialValue } ilə ekvivalentdir, fərqi ilə ki, React hər renderdə ref obyektinin eyni olacağına zəmanət verir. Heç bir sehr — sadəcə React tərəfindən idarə olunan sabit istinad.

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 ilkin olaraq
    // countRef.current = 5 mutasiyadan sonra
    // Yenidən render baş vermir!
}

DOM elementlərinə useRef vasitəsilə giriş

useRef-in ən geniş yayılmış istifadə ssenarisi — DOM elementinə birbaşa giriş əldə etməkdir. React komponent montaj edildikdən sonra elementRef.current-i DOM qovşağına istinadla təyin edir. Bu, inputa fokus vermək, elementin ölçülərini ölçmək, animasiya kitabxanaları və React renderindən istifadə etməyən kitabxanalarla inteqrasiya üçün lazımdır.

React DOM-a ref istinadlarını avtomatik idarə edir: montaj zamanı faktiki DOM qovşağını təyin edir, montajdan çıxararkən sıfırlayır (null edir). Bu, .current-da həmişə aktual dəyərin olmasını təmin edir və silinmiş elementlərə “asılı” istinadlar vasitəsilə yaddaş sızmalarının qarşısını alır. Heç bir əl təmizləmə tələb olunmur.

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

    useEffect(() => {
        // Komponent montaj edildikdən sonra inputa fokus ver
        inputRef.current?.focus();
    }, []);

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

React — Refs and DOM documentation (2025)-ə görə, ref-i deklarativ əməliyyatlar üçün istifadə etməyin — modalların açılması/bağlanması, görünürlüyün idarə edilməsi. Bu məqsədlər üçün state və proplar mövcuddur. Reflər imperativ əməliyyatlar üçün nəzərdə tutulub: fokus, mətn seçimi, üçüncü tərəf kitabxanaları ilə inteqrasiya.

Yenidən render olmadan mutasiya olunan dəyərlərin saxlanması

Əhəmiyyətinə görə ikinci ssenari — ixtiyari dəyərlərin saxlanması, renderlər arasında qorunmalı, lakin dəyişməsi yenidən renderə səbəb olmamalıdır. Tipik nümunələr: taymer identifikatorları (setInterval/setTimeout), sorğuları ləğv etmək üçün flaqalar, müqayisə üçün əvvəlki prop dəyərləri və UI çıxışına təsir etməyən istənilən məlumat.

Bu, xüsusilə useEffect-də faydalıdır: useRef taymer identifikatorunu saxlayır, cleanup isə onu təmizləyir. timerId-ni useState-də saxlamaq hər setTimerId çağırışında nə logika, nə də UI üçün lazım olmayan əlavə yenidən renderə səbəb olardı. useRef bu problemi overhead olmadan və lazımsız yenidən çəkilmələr olmadan həll edir.

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

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

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

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

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

useRef vs useState: nə vaxt hansını istifadə etməli

Əsas dilemma — useRef və useState arasında seçim — bir sualla həll olunur: “Dəyər dəyişdikdə yenidən render lazımdırmı?”. Bəli — useState. Xeyr — useRef. useState komponentin çıxışına təsir edən vəziyyəti saxlayır; useRef daxili logika üçün lazım olan, lakin UI-a təsir etməyən məlumatları saxlayır.

Praktikada developerlər bağlama problemlərindən qaçmaq üçün tez-tez useRef-dən callbackləri saxlamaq üçün istifadə edirlər. Məsələn, əgər useEffect hadisəyə abunə olursa və callback daxilində aktual state lazımdırsa — callback-i useRef-də saxlayın. Hər renderdə ref.current-i yeni funksiya ilə yeniləyin və effekt yenidən abunə olmadan həmişə təzə callback-i çağıracaq.

Anti-nümunə mövcuddur: JSX-də lazım olan, lakin dəyişməsi yenidən renderə səbəb olmamalı olan məlumatları saxlamaq üçün useRef-dən istifadə etmək. Bu, desinxronizasiyaya gətirib çıxarır — UI köhnə məlumatları göstərir, halbuki ref.current artıq yenidir. Əgər dəyər UI-da göstərilirsə — useState istifadə edin. Yalnız logika daxilində istifadə olunursa — useRef.

useRef-in useEffect ilə kombinasiyası

useRef + useEffect birləşməsi — propların əvvəlki dəyərlərini izləmək üçün standart nümunədir. Əvvəlki dəyəri ref-də saxlayın, useEffect-də cari ilə müqayisə edin və fərq əsasında qərar qəbul edin. Bu, xüsusilə animasiyalarda, dəyişmədən əvvəl hansı dəyərin olduğunu bilmək lazım olduqda faydalıdır.

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)-ə görə, bu nümunə “previous value pattern” adlanır. O işləyir, çünki useRef dəyəri renderlər arasında saxlayır, useEffect isə dəyişikliklər təsdiqləndikdən sonra icra olunur. Əvvəlcə DOM yeni price ilə yenilənir, sonra useEffect əvvəlki ilə (hələ də ref-də olan) müqayisə edir və ref.current-i cari dəyərə yeniləyir.

useRef ilə tipik səhvlər

Ən geniş yayılmış səhv — ref.current-in render fazasında oxunması JSX hesablamaq üçün. ref.current dəyişməsi yenidən renderə səbəb olmadığından, komponent köhnəlmiş dəyərdən istifadə edə bilər. Əgər .current dəyəri UI çıxışında iştirak edirsə — useState istifadə edin. Ref və state-i sinxronlaşdırmaq lazımdırsa, state-i ref-dən yeniləmək üçün useEffect-dən istifadə edin.

• JSX-də Ref — render funksiyası daxilində ref.current oxumaq UI və məlumatların desinxronizasiyasına gətirib çıxarır.
• Ref-in useEffect asılılığı kimi — ref.current asılılıq massivində olmamalıdır; React onun dəyişməsini izləmir.
• Unudulmuş null yoxlaması — montajdan çıxararkən ref.current null olur; girişdən əvvəl yoxlayın.
• Funksiyaların ref-də saxlanması — təzə callback nümunəsindən istifadə edirsinizsə, hər renderdə ref.current-i yeniləyin.

// ❌ Render zamanı göstərmək üçün ref.current oxumayın
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // mutasiyada YENILƏNMƏYƏCƏK
}

// ✅ Göstərmək üçün state, logika üçün ref istifadə edin
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

Digər geniş yayılmış səhv — məlumatlar UI-a təsir etdiyi halda, useRef-i komponentdə vəziyyətin saxlanmasının yeganə yolu kimi istifadə etməkdir. Developerlər “lazımsız” yenidən renderlərdən qaçmaq üçün useRef-i seçirlər, lakin nəticədə yenilənməyən UI əldə edirlər. Düzgün yanaşma: UI məlumatları üçün useState, yalnız renderdə iştirak etməyən köməkçi dəyərlər üçün useRef istifadə edin.