useRef — ano ito, ang reference hook at pagtatrabaho sa DOM sa React

Ano ang useRef sa React

useRef — ay isang hook na idinagdag sa React 16.8, na nagbabalik ng mutable ref object na may iisang property na .current. Ang paunang halaga ay itinalaga sa .current kapag ni-mount ang component. Ang pangunahing pagkakaiba mula sa isang ordinaryong variable — ang ref object ay nakaligtas sa muling pag-render: sa muling pag-render, hindi muling ginagawa ng React ang ref, kundi ibinabalik ang parehong object.

Ang panloob na implementasyon ng useRef ay gumagamit ng parehong mekanismo ng useState at useEffect — isang naka-link na listahan ng mga hook sa fiber node. Gayunpaman, hindi tulad ng useState, hindi sinusubaybayan ng React ang mga pagbabago ng ref object, hindi nag-queue ng mga update, at hindi nag-iiskedyul ng muling pag-render. Ginagawa nito ang useRef na isang napakagaan na hook na hindi nakakaapekto sa performance kahit na sa madalas na pagbabago.

Ayon sa React Team — Hooks FAQ (2025), ang useRef ay isang “kahon” na nag-iimbak ng halaga. Syntactic sugar: const ref = useRef(initialValue) ay katumbas ng const ref = { current: initialValue } na may pagkakaiba na ginagarantiyahan ng React na ang ref object ay magiging pareho sa bawat render. Walang magic — isang matatag na reference lamang na pinamamahalaan ng React.

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 sa una
    // countRef.current = 5 pagkatapos ng mutasyon
    // Walang nagaganap na muling pag-render!
}

Pag-access sa mga elemento ng DOM sa pamamagitan ng useRef

Ang pinakakaraniwang sitwasyon ng paggamit ng useRef — pagkuha ng direktang access sa elemento ng DOM. Itinatalaga ng React ang elementRef.current sa reference ng DOM node pagkatapos i-mount ang component. Ito ay kinakailangan para sa pag-focus ng input, pagsukat ng dimensyon ng elemento, integrasyon sa mga animation library at library na hindi gumagamit ng React rendering.

Awtomatikong pinamamahalaan ng React ang mga ref reference sa DOM: kapag nagmo-mount ay itinatalaga ang aktwal na DOM node, kapag nag-a-unmount ay nirerese (nagiging null). Ginagarantiyahan nito na ang .current ay laging may napapanahong halaga at pinipigilan ang pagtagas ng memorya sa pamamagitan ng “nakabitin” na mga reference sa mga tinanggal na elemento. Walang kinakailangang manual na paglilinis.

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

    useEffect(() => {
        // I-focus ang input pagkatapos i-mount ang component
        inputRef.current?.focus();
    }, []);

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

Ayon sa React — Refs and DOM documentation (2025), huwag gumamit ng ref para sa mga deklaratibong operasyon — pagbubukas/pagsasara ng mga modal, pamamahala ng visibility. Para sa mga layuning ito ay mayroong state at props. Ang mga ref ay para sa mga imperative na operasyon na hindi maaaring ipahayag nang deklaratibo: focus, pagpili ng text, integrasyon sa mga third-party library.

Pag-iimbak ng mga mutable value nang walang muling pag-render

Ang pangalawang pinakamahalagang sitwasyon — pag-iimbak ng mga arbitraryong halaga na dapat mapanatili sa pagitan ng mga render, ngunit ang pagbabago nito ay hindi dapat magdulot ng muling pag-render. Mga tipikal na halimbawa: mga identifier ng timer (setInterval/setTimeout), mga flag para sa pagkansela ng mga request, mga nakaraang halaga ng props para sa paghahambing, at anumang data na hindi nakakaapekto sa output ng UI.

Ito ay lalong kapaki-pakinabang sa useEffect: iniimbak ng useRef ang identifier ng timer, at nililinis ito ng cleanup. Kung ang timerId ay iniimbak sa useState, ang bawat tawag sa setTimerId ay magdudulot ng hindi kinakailangang muling pag-render na hindi kailangan para sa lohika o sa UI. Nalulutas ng useRef ang problemang ito nang walang overhead at walang hindi kinakailangang muling pagguhit.

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

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

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

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

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

useRef vs useState: kailan gagamitin ang alin

Ang pangunahing dilemma — ang pagpili sa pagitan ng useRef at useState — ay nalulutas sa isang tanong: “Kailangan ba ng muling pag-render kapag nagbago ang halaga?”. Kung oo — useState. Kung hindi — useRef. Ang useState ay nag-iimbak ng estado na nakakaapekto sa output ng component; ang useRef ay nag-iimbak ng data na kailangan para sa panloob na lohika, ngunit hindi nakakaapekto sa UI.

Sa pagsasanay, madalas gumagamit ang mga developer ng useRef para mag-imbak ng mga callback, upang maiwasan ang mga problema sa mga closure. Halimbawa, kung ang useEffect ay nag-subscribe sa isang event at sa loob ng callback ay kailangan ang napapanahong state — itago ang callback sa useRef. Sa bawat render, i-update ang ref.current ng bagong function, at ang effect ay palaging tatawag ng sariwang callback nang walang muling pag-subscribe.

Mayroong anti-pattern: paggamit ng useRef upang mag-imbak ng data na kailangan sa JSX, ngunit ang pagbabago nito ay hindi dapat magdulot ng muling pag-render. Ito ay humahantong sa desynchronization — ang UI ay nagpapakita ng lumang data, kahit na ang ref.current ay bago na. Kung ang halaga ay ipinapakita sa UI — gamitin ang useState. Kung ginagamit lamang sa loob ng lohika — useRef.

useRef na may kombinasyon ng useEffect

Ang kombinasyon ng useRef + useEffect — isang karaniwang pattern para sa pagsubaybay ng mga nakaraang halaga ng props. Itago ang nakaraang halaga sa ref, ihambing sa kasalukuyan sa useEffect, at gumawa ng desisyon batay sa pagkakaiba. Ito ay lalong kapaki-pakinabang sa mga animation, kapag kailangan mong malaman kung anong halaga ang bago ang pagbabago.

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>;
}

Ayon sa React Documentation — Hooks FAQ (2025), ang pattern na ito ay tinatawag na “previous value pattern”. Ito ay gumagana dahil pinapanatili ng useRef ang halaga sa pagitan ng mga render, at ang useEffect ay isinasagawa pagkatapos makumpirma ang mga pagbabago. Una, ang DOM ay ina-update ng bagong price, pagkatapos ay inihambing ng useEffect ang nauna (na nasa ref pa) at ina-update ang ref.current sa kasalukuyang halaga.

Mga karaniwang pagkakamali sa useRef

Ang pinakakaraniwang pagkakamali — pagbabasa ng ref.current sa render phase para sa pagkalkula ng JSX. Dahil ang pagbabago ng ref.current ay hindi nagdudulot ng muling pag-render, ang component ay maaaring gumamit ng lumang halaga. Kung ang halaga ng .current ay lumalahok sa output ng UI — gamitin ang useState. Kung kailangan mong i-synchronize ang ref at state, gamitin ang useEffect para i-update ang state mula sa ref.

• Ref sa JSX — ang pagbabasa ng ref.current sa loob ng render function ay humahantong sa desynchronization ng UI at data.
• Ref bilang dependency ng useEffect — ang ref.current ay hindi dapat nasa dependency array; hindi sinusubaybayan ng React ang mga pagbabago nito.
• Nakalimutang null check — kapag nag-a-unmount, ang ref.current ay nagiging null; suriin bago access.
• Pag-iimbak ng mga function sa ref — i-update ang ref.current sa bawat render kung gumagamit ka ng pattern na may sariwang callback.

// ❌ Huwag basahin ang ref.current sa panahon ng render para sa pagpapakita
function BadComponent() {
    const valRef = useRef(0);
    return <p>{valRef.current}</p>; // HINDI mag-a-update sa mutasyon
}

// ✅ Gamitin ang state para sa pagpapakita, ref para sa lohika
function GoodComponent() {
    const [val, setVal] = useState(0);
    const valRef = useRef(0);
    return <p>{val}</p>;
}

Ang isa pang karaniwang pagkakamali — paggamit ng useRef bilang tanging paraan ng pag-iimbak ng estado sa component, kapag ang data ay nakakaapekto pa rin sa UI. Pinipili ng mga developer ang useRef upang maiwasan ang “di kailangan” na muling pag-render, ngunit sa huli ay nakakakuha ng UI na hindi nag-a-update. Ang tamang diskarte: gamitin ang useState para sa UI data at useRef lamang para sa mga pantulong na halaga na hindi lumalahok sa render.