useRef Full Guide – সম্পূর্ণ ব্যাখ্যা

useRef হল React-এর একটি খুবই গুরুত্বপূর্ণ Hook, যা এমন ভ্যালু স্টোর করে যা রি-রেন্ডার ছাড়াই পরিবর্তন করা যায়। অর্থাৎ, state আপডেট করলে কম্পোনেন্ট রি-রেন্ডার হয়; কিন্তু useRef ব্যবহারে এমন ডেটা রাখা যায় যা পরিবর্তন করলেও কম্পোনেন্ট রি-রেন্ডার হয় না।

⭐ useRef কী?

useRef এর মূল কাজ হলো: যে ভ্যালুটি রেন্ডারিং-এর মধ্যে ধরে রাখা দরকার এবং সেটি পরিবর্তন করলেও UI রেন্ডার না হওয়া দরকার — সেই ভ্যালুটি সংরক্ষণ করা।

এটি সাধারণত তিনটি কারণে ব্যবহার করা হয়:

• DOM এলিমেন্ট অ্যাক্সেস করতে
• কোনো ভ্যালুর আগের ও বর্তমান অবস্থান স্টোর করে রাখতে
• এমন ডেটা রাখতে যা রেন্ডারে প্রভাব ফেলবে না

🎯 useRef কিভাবে ব্যবহার করবেন?

import { useRef } from "react";

function MyComponent() {
  const myRef = useRef(initialValue);

  return (...);
}

useRef() একটি অবজেক্ট রিটার্ন করে:

{
  current: initialValue
}

আপনি শুধু .current এর ভ্যালু পরিবর্তন করলেই হবে — এতে কম্পোনেন্ট রি-রেন্ডার হবে না।

📌 Example 1: DOM অ্যাক্সেস করতে useRef

React-এ সরাসরি DOM অ্যাক্সেস করতে document.getElementById ব্যবহার করা হয় না। এর পরিবর্তে useRef ব্যবহার করা উচিত।

import { useRef } from "react";

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
     <div>
       <input ref={inputRef} type="text" placeholder="Type here..." />
       <button onClick={handleFocus}>Focus Input</button>
     </div>
  );
}

export default InputFocus;

👉 এখানে বোতাম চাপলে ইনপুট বক্স অটোমেটিক ফোকাস হবে।

📌 Example 2: useRef দিয়ে ভ্যালু স্টোর করা (no re-render)

এটি এমন একটি ভ্যালু রাখতে সাহায্য করে যা পরিবর্তন করলেও UI আপডেট হবে না।

import { useState, useRef } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(1);

  const increment = () => {
    setCount(count + 1);
    renderCount.current += 1;
  };

  return (
     <div>
       <h2>Count: {count}</h2>
       <h3>Rendered: {renderCount.current} times</h3>
       <button onClick={increment}>Increase</button>
       </div>
  );
}

export default Counter;

👉 renderCount.current আপডেট হলেও UI রেন্ডার হবে না।

📌 Example 3: Previous Value Store করতে useRef

useEffect এর সাথে useRef ব্যবহার করে আগের ভ্যালু সংরক্ষণ করা যায়।

import { useState, useEffect, useRef } from "react";

function PreviousValue() {
  const [value, setValue] = useState("");
  const prevValue = useRef("");

  useEffect(() => {
    prevValue.current = value;
  }, [value]);

  return (
    <div>
       <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
       />
       <p>Current: {value}</p>
       <p>Previous: {prevValue.current}</p>
    </div>
  );
}

export default PreviousValue;

🚀 useRef vs useState

🎯 কখন useRef ব্যবহার করবেন?

• DOM এলিমেন্ট অ্যাক্সেস করলে
• স্টোর করার মতো ভ্যালু থাকলে
• টাইমার বা ইন্টারভ্যাল আইডি রাখতে চাইলে
• আগের ভ্যালু ট্র্যাক করতে হলে
• রি-রেন্ডার ছাড়া ডেটা সংরক্ষণ করতে হলে

✔️ সারসংক্ষেপ

React-এ useRef হল একটি powerful hook যা DOM অ্যাক্সেস, ভ্যালু স্টোর, previous state tracking এবং performance optimization এর জন্য ব্যবহার করা হয়। এটি এমন ডেটা আলাদা করে রাখে যেটির পরিবর্তনে UI আপডেটের দরকার পড়ে না।