useRef — এটি কী, রেফারেন্স হুক এবং React-এ DOM-এর সাথে কাজ

React-এ useRef কী

useRef একটি হুক যা React 16.8-এ যোগ করা হয়েছে যা একটি একক .current প্রপার্টি সহ একটি মিউটেবল ref অবজেক্ট রিটার্ন করে। কম্পোনেন্ট মাউন্ট করার সময় প্রাথমিক মান .current-এ নির্ধারিত হয়। সাধারণ ভেরিয়েবল থেকে প্রধান পার্থক্য হল ref অবজেক্ট রি-রেন্ডার থেকে বেঁচে থাকে: পরবর্তী রেন্ডারে React ref পুনরায় তৈরি করে না বরং একই অবজেক্ট রিটার্ন করে।

অভ্যন্তরীণভাবে, useRef একই পদ্ধতি ব্যবহার করে যা useState এবং useEffect — ফাইবার-নোডে হুকের লিংকড লিস্ট। তবে, useState-এর বিপরীতে, React ref অবজেক্টের পরিবর্তন ট্র্যাক করে না, আপডেট কিউ করে না এবং রি-রেন্ডার শিডিউল করে না। এটি useRef-কে একটি অত্যন্ত হালকা হুক করে তোলে যা ঘন ঘন পরিবর্তনেও কর্মক্ষমতাকে প্রভাবিত করে না।

React টিম — Hooks FAQ (2025) অনুসারে, useRef মূলত একটি “বাক্স” যা মান সংরক্ষণ করে। সিনট্যাক্টিক সুগার: const ref = useRef(প্রাথমিক_মান) const ref = { current: প্রাথমিক_মান }-এর সমতুল্য, এই পার্থক্যের সাথে যে React গ্যারান্টি দেয় যে ref অবজেক্ট প্রতিটি রেন্ডারে একই হবে। কোনো জাদু নয় — শুধু React দ্বারা পরিচালিত একটি স্থিতিশীল রেফারেন্স।

import { useRef } from 'react';

function Component() {
    const countRef = useRef(0);
    // countRef.current = 0 প্রাথমিকভাবে
    // countRef.current = 5 পরিবর্তনের পরে
    // কোনো রি-রেন্ডার হয় না!
}

useRef-এর মাধ্যমে DOM এলিমেন্ট অ্যাক্সেস

useRef-এর সবচেয়ে সাধারণ ব্যবহার হল DOM এলিমেন্টে সরাসরি অ্যাক্সেস পাওয়া। React কম্পোনেন্ট মাউন্ট হওয়ার পর elementRef.current-কে DOM নোডের রেফারেন্স নির্ধারণ করে। এটি ইনপুট ফোকাস করা, এলিমেন্টের মাত্রা মাপা, অ্যানিমেশন লাইব্রেরি এবং সেই লাইব্রেরিগুলির সাথে সংহত করার জন্য প্রয়োজনীয় যা React রেন্ডারিং ব্যবহার করে না।

React স্বয়ংক্রিয়ভাবে DOM-এ ref রেফারেন্স পরিচালনা করে: মাউন্ট করার সময় প্রকৃত DOM নোড নির্ধারণ করে, আনমাউন্ট করার সময় null করে দেয়। এটি গ্যারান্টি দেয় যে .current-এ সর্বদা হালনাগাদ মান থাকে এবং মুছে ফেলা এলিমেন্টের ঝুলন্ত রেফারেন্সের মাধ্যমে মেমরি লিক প্রতিরোধ করে। কোনো ম্যানুয়াল পরিষ্কারের প্রয়োজন নেই।

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

    useEffect(() => {
        // কম্পোনেন্ট মাউন্ট হওয়ার পর ইনপুট ফোকাস করুন
        inputRef.current?.focus();
    }, []);

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

React — Refs এবং DOM ডকুমেন্টেশন (2025) অনুসারে, ঘোষণামূলক অপারেশন — মোডাল খোলা/বন্ধ করা, দৃশ্যমানতা পরিচালনা — এর জন্য ref ব্যবহার করবেন না। এই উদ্দেশ্যে state এবং props আছে। Refs সেসব আবশ্যিক অপারেশনের জন্য যা ঘোষণামূলকভাবে প্রকাশ করা যায় না: ফোকাস, টেক্সট নির্বাচন, তৃতীয়-পক্ষ লাইব্রেরির সাথে সংহতকরণ।

রি-রেন্ডার ছাড়া মিউটেবল মান সংরক্ষণ

দ্বিতীয় সবচেয়ে গুরুত্বপূর্ণ ব্যবহার হল নির্দিষ্ট মান সংরক্ষণ যা রেন্ডারের মধ্যে টিকে থাকতে হবে কিন্তু যার পরিবর্তনে রি-রেন্ডার ট্রিগার হওয়া উচিত নয়। সাধারণ উদাহরণ: টাইমার শনাক্তকারী (setInterval/setTimeout), অনুরোধ বাতিলের ফ্ল্যাগ, তুলনার জন্য পূর্ববর্তী prop মান এবং যেকোনো ডেটা যা UI আউটপুটকে প্রভাবিত করে না।

এটি বিশেষভাবে useEffect-এ কার্যকর: useRef টাইমার শনাক্তকারী সংরক্ষণ করে এবং cleanup এটি পরিষ্কার করে। যদি timerId useState-এ সংরক্ষিত থাকে, তাহলে প্রতিটি setTimerId কল একটি অপ্রয়োজনীয় রি-রেন্ডার ঘটাত যা লজিক বা UI উভয়ের জন্যই প্রয়োজনীয় নয়। useRef এই সমস্যাটি ওভারহেড এবং অপ্রয়োজনীয় রি-রেন্ডার ছাড়াই সমাধান করে।

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 বনাম useState: কখন কী ব্যবহার করবেন

প্রধান দ্বিধা — useRef এবং useState-এর মধ্যে নির্বাচন — একটি প্রশ্ন দ্বারা সমাধান হয়: “মান পরিবর্তন হলে কি রি-রেন্ডার প্রয়োজন?” যদি হ্যাঁ — useState। যদি না — useRef। useState কম্পোনেন্ট আউটপুটকে প্রভাবিত করে এমন অবস্থা সংরক্ষণ করে; useRef অভ্যন্তরীণ লজিকের জন্য প্রয়োজনীয় ডেটা সংরক্ষণ করে কিন্তু UI-কে প্রভাবিত করে না।

অনুশীলনে, ডেভেলপাররা প্রায়ই ক্লোজার সমস্যা এড়াতে কলব্যাক সংরক্ষণের জন্য useRef ব্যবহার করে। উদাহরণস্বরূপ, যদি useEffect একটি ইভেন্টে সাবস্ক্রাইব করে এবং কলব্যাকের বর্তমান state প্রয়োজন — কলব্যাকটি useRef-এ সংরক্ষণ করুন। প্রতিটি রেন্ডারে, ref.current একটি নতুন ফাংশন দিয়ে আপডেট করুন এবং প্রভাব সর্বদা পুনরায় সাবস্ক্রাইব না করেই তাজা কলব্যাকটি ডাকবে।

একটি অ্যান্টি-প্যাটার্ন আছে: JSX-এ প্রয়োজনীয় ডেটার জন্য useRef ব্যবহার করা যার পরিবর্তনে রি-রেন্ডার হওয়া উচিত নয়। এটি ডিসিঙ্ক্রোনাইজেশন ঘটায় — UI পুরানো ডেটা দেখায় যখন ref.current ইতিমধ্যে নতুন। যদি মান UI-তে প্রদর্শিত হয় — useState ব্যবহার করুন। যদি শুধুমাত্র অভ্যন্তরীণভাবে ব্যবহৃত হয় — useRef।

useEffect-এর সাথে useRef-এর সংমিশ্রণ

useRef + useEffect-এর সংমিশ্রণ হল পূর্ববর্তী prop মান ট্র্যাক করার মানক প্যাটার্ন। পূর্ববর্তী মান 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 ডকুমেন্টেশন — Hooks FAQ (2025) অনুসারে, এই প্যাটার্নটিকে “পূর্ববর্তী মান প্যাটার্ন” বলা হয়। এটি কাজ করে কারণ useRef রেন্ডারের মধ্যে মান সংরক্ষণ করে এবং useEffect পরিবর্তন প্রতিশ্রুতিবদ্ধ হওয়ার পরে নির্বাহিত হয়। প্রথমে DOM নতুন মূল্য দিয়ে আপডেট হয়, তারপর useEffect এটির তুলনা পূর্ববর্তী (যা এখনও ref-এ আছে) সাথে করে এবং ref.current-কে বর্তমান মানে আপডেট করে।

useRef-এর সাথে সাধারণ ভুল

সবচেয়ে সাধারণ ভুল হল JSX গণনার জন্য রেন্ডার পর্যায়ে ref.current পড়া। যেহেতু ref.current পরিবর্তনে রি-রেন্ডার হয় না, কম্পোনেন্ট পুরানো মান ব্যবহার করতে পারে। যদি .current UI আউটপুটে অংশগ্রহণ করে — useState ব্যবহার করুন। যদি আপনাকে ref এবং state সিঙ্ক করতে হয়, তাহলে ref থেকে state আপডেট করতে useEffect ব্যবহার করুন।

• JSX-এ Ref — রেন্ডার ফাংশনের ভিতরে ref.current পড়লে UI এবং ডেটার ডিসিঙ্ক্রোনাইজেশন হয়।
• useEffect নির্ভরতা হিসেবে Ref — ref.current নির্ভরতা অ্যারেতে থাকা উচিত নয়; React এর পরিবর্তন ট্র্যাক করে না।
• ভুলে যাওয়া null পরীক্ষা — আনমাউন্ট করার সময় 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 পায় যা আপডেট হয় না। সঠিক পদ্ধতি: UI ডেটার জন্য useState এবং শুধুমাত্র সহায়ক মানের জন্য useRef ব্যবহার করুন যা রেন্ডারিংয়ে অংশগ্রহণ করে না।