Manipulating DOM with Refs

React সাধারণত নিজেই DOM ম্যানেজ করে। যখনই কোনো state পরিবর্তন হয়, React তার virtual DOM ব্যবহার করে সেই পরিবর্তনগুলো নির্দিষ্টভাবে ওয়েব পেজে আপডেট করে। কিন্তু কিছু কিছু ক্ষেত্রে আমাদের সরাসরি DOM এর কোনো নির্দিষ্ট এলিমেন্টে কাজ করতে হয়, যেখানে React স্বয়ংক্রিয়ভাবে কিছু করতে পারে না। যেমন:

1. কোনো ইনপুট ফিল্ডে সরাসরি ফোকাস দেওয়া: কোনো নির্দিষ্ট ইনপুট বক্সে ইউজার সরাসরি টাইপ করতে পারে, সেজন্য আমরা সরাসরি ফোকাস দিতে চাই।
2. স্ক্রল পজিশন কন্ট্রোল করা: আমরা পেজের কোনো বিশেষ স্থানে স্ক্রল করতে চাই, যেটা React স্বয়ংক্রিয়ভাবে করে না।
3. এলিমেন্টের মাপ বা পজিশন মাপা: আমরা জানতে চাই কোনো DOM এলিমেন্টের সঠিক দৈর্ঘ্য বা প্রস্থ।

এসব ক্ষেত্রে useRef হুকটি ব্যবহার করে আমরা সরাসরি DOM মডিফাই করতে পারি। useRef হলো React-এর একটি বিশেষ হুক, যা আমাদের DOM এ সরাসরি রেফারেন্স রাখার সুবিধা দেয়। নিচে, আমরা একে ধাপে ধাপে প্রয়োগের প্রক্রিয়া আলোচনা করবো।

DOM মডিফাই করার স্টেপগুলো

import { useRef } from "react";

const myRef = useRef(null);

<div ref={myRef}>এটা এমনিতে দেখাচ্ছে</div>
<button onClick={handleChangeText}>টেক্সট বদলাও</button>

function handleChangeText() {
  myRef.current.innerText = "এই টেক্সটটা এখন রেফের মাধ্যমে আসছে!";
}

Full Code Example

পুরো কোডটি একত্রে দেখতে নিচের উদাহরণটি দেখা যেতে পারে, যেখানে আমরা একটি div এলিমেন্টের টেক্সট রেফারেন্সের মাধ্যমে পরিবর্তন করছি।

import { useRef } from "react";
 
export default function Example() {
  const myRef = useRef(null);
 
  function handleChangeText() {
    myRef.current.innerText = "এই টেক্সটটা এখন রেফের মাধ্যমে আসছে!";
  }
 
  return (
    <>
      <div ref={myRef}>এটা এমনিতে দেখাচ্ছে</div>
      <button onClick={handleChangeText}>টেক্সট বদলাও</button>
    </>
  );
}

এখানে যখন আমরা "টেক্সট বদলাও" বাটনে ক্লিক করি, তখন handleChangeText ফাংশনটি কল হয়। ফাংশনটি myRef রেফারেন্সের current প্রপার্টি ব্যবহার করে div এর innerText পরিবর্তন করে। অর্থাৎ, myRef এর মাধ্যমে আমরা সরাসরি DOM এ প্রবেশ করে সেই div এর টেক্সট পরিবর্তন করতে পারলাম।

এভাবে useRef ব্যবহার করে DOM ম্যানিপুলেশন সহজে করা যায়, যেখানে React স্বয়ংক্রিয়ভাবে কিছু করতে পারে না।