রিয়াক্ট অটোমেটিক ভাবে DOM কে আপডেট করতে থাকে, তাই আমদের ম্যনুয়ালি DOM কে মডিফাই করা দরকার হয়না, কিন্তু আমাদের এমন এমন কিছু ইউজকেস আসতে পারে যখন আমদের বাধ্য হয়ে DOM মেনিপুলেট করা লাগে, যেমনঃ কোন এলিমেন্টে ফোকাস করা, স্ক্রল করে কোন এলিমেন্টের পজিশনে যাওয়া অথবা সাইজ পরিমাপ করা। রেয়াক্টে এসব করার জন্য কোন বিল্ট-ইন মেথড নেই, তাই এসব করার জন্য আমরা useRef ব্যবহার করে সরাসরি DOM মডিফাই করতে পারি।
চলুন দেখে নেই কিভাবে আমরা useRef ব্যবহার করে DOM মেনিপুলেট করতে পারি,
Import useref from react
সর্বপ্রথম আমদেরকে রিয়াক্ট থেকে useRefকে ইম্পোর্ট করতে হবে।
import { useState } from "react";declare a ref inside your component:
কম্পোনেন্টের ভিতর ref কে ডিক্লেয়ার করে ইনিশিয়াল করতে হবে।
const myRef = useRef(null);pass your ref as the ref attribute to the JSX tag
এবারে আমরা যেই DOM node কে মেনিপুলেট করতে চাই সেই JSX ট্যাগ এ Attraibute এর মতো করে ref কে ব্যবহার করবো।
<div ref={myRef}></div>
<button onClick={handleChangeText}>Change Text</button>modify the dom node in event handler
এবারে আমদের ওই DOM NODE যেসব মেনিপুলেশন করা দরকার তা করতে পারবো event handler এর মধ্যমে।
function handleChangeText() {
myRef.innerText = "This is a text passed by the ref";
}