React-এ useRef কি আপনার জন্য রহস্যময়? 🤔 আসুন, এর জাদুকরী ব্যবহারগুলো জেনে নিই!

আমরা যারা React নিয়ে কাজ করি, তারা প্রায়ই useState এবং useEffect ব্যবহার করি। কিন্তু যখন সরাসরি DOM element নিয়ে কাজ করার দরকার হয়, অথবা এমন কোনো ভ্যালু স্টোর করতে চাই যা re-render ট্রিগার করবে না, তখন useRef ব্যবহার করতে পারি।

💡 useRef কী এবং কেন এটি ব্যবহার করবেন?
-- useRef হলো React এর একটি powerful hook. এটি মূলত একটি mutable অবজেক্ট তৈরি করে, যার .current প্রপার্টিতে আপনি যেকোনো ভ্যালু রাখতে পারেন। এর প্রধান কাজগুলো হলো:
1.DOM Element এর Reference রাখা
2.Mutable (পরিবর্তনযোগ্য) মান রাখা — Re-render ছাড়া
3.Previous Value Store করা
4.Third-party library বা manual DOM operation

💡 useState থেকে এটি কোথায় আলাদা?
useState ভ্যালু পরিবর্তন হলে কম্পোনেন্ট re-render করে, কিন্তু useRef-এর .current
ভ্যালু পরিবর্তন হলে re-render হয় না। এটি পারফরম্যান্স অপটিমাইজেশনে গুরুত্বপূর্ণ ভূমিকা রাখে।

💡উদাহরণ: DOM element access

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
export default MyComponent;

💡উদাহরণ: Previous value track

import React, { useEffect, useRef, useState } from 'react';

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

  useEffect(() => {
    prevCount.current = count;
  }, [count]);

  return (
    <div>
      <p>Current: {count}</p>
      <p>Previous: {prevCount.current}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

useRef হলো একটি বাক্সের (box) মতো, যার ভেতরে আপনি কোনো মান (value) রাখতে পারেন — এবং সেই মানটি কম্পোনেন্ট বারবার re-render হলেও অপরিবর্তিত থাকে, মানে নষ্ট হয় না বা হারিয়ে যায় না।

আপনার React প্রোজেক্টে useRef কিভাবে ব্যবহার করছেন? কমেন্ট করে জানান! 👇