Accessing another component’s DOM nodes

React-এ আমরা সাধারণত সরাসরি HTML Element-এ ref দিয়ে অ্যাক্সেস পেতে পারি। ref দিয়ে HTML Element ধরতে চাইলে আমরা সেই এলিমেন্টে ref অ্যাট্রিবিউট যোগ করি এবং ref.current এর মাধ্যমে তার ভ্যালুতে পৌঁছাই। কিন্তু যদি আমাদের নিজের তৈরি করা কাস্টম কম্পোনেন্টে (যেমন <MyInput />) সরাসরি ref দিয়ে অ্যাক্সেস করতে চাই, তখন সেটা সম্ভব হয় না। এতে কনসোলে ref-এর current প্রপার্টি null দেখাবে।

উদাহরণ: সমস্যা বোঝা যাক

import { useRef } from "react";
 
function MyInput(props) {
  return <input {...props} />;
}
 
export default function MyForm() {
  const inputRef = useRef(null);
 
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

এখানে দুটি কম্পোনেন্ট রয়েছে:

1. <MyInput /> কম্পোনেন্ট - একটি কাস্টম কম্পোনেন্ট যা ইনপুট ফিল্ড হিসেবে কাজ করে।
2. <MyForm /> প্যারেন্ট কম্পোনেন্ট - এই কম্পোনেন্টে একটি বাটন রয়েছে যা ক্লিক করলে ইনপুট ফিল্ডটিতে ফোকাস দেয়ার চেষ্টা করে।

এই উদাহরণে, আমরা <MyInput />-এ ref ব্যবহার করে তার ইনপুট এলিমেন্টে ফোকাস করতে চাইছি। কিন্তু React সরাসরি কোনো কাস্টম কম্পোনেন্টের মধ্যে ref শেয়ার করে না। যদি আমরা বাটনে ক্লিক করি, ইনপুট ফিল্ডটি ফোকাস হবে না কারণ ref.current null দেখাবে।

কেন এই সমস্যা হচ্ছে?

React কম্পোনেন্টের কাঠামো অনুযায়ী কোনো কাস্টম কম্পোনেন্টের ref সরাসরি বাইরে শেয়ার করা হয় না, এমনকি সেটি নিজের চাইল্ড কম্পোনেন্ট হলেও না। এর কারণ হলো, React এভাবে তৈরি করা হয়েছে যেন বাইরের কম্পোনেন্টের অভ্যন্তরীণ স্ট্রাকচার গুলোতে সরাসরি হস্তক্ষেপ না করা হয়। এর ফলে কম্পোনেন্টগুলোর মধ্যে তথ্য আদান-প্রদানের গোপনীয়তা (Encapsulation) বজায় থাকে।

সমাধান: forwardRef ব্যবহার করা

React এর forwardRef API ব্যবহার করে আমরা এই সমস্যা সমাধান করতে পারি। forwardRef এর মাধ্যমে আমরা কাস্টম কম্পোনেন্টের ভেতরের DOM নোড বা ইনপুট ফিল্ডকে প্যারেন্ট কম্পোনেন্ট থেকে সরাসরি অ্যাক্সেস করতে পারি।

forwardRef ব্যবহার করতে, আমাদের দুটি ধাপ অনুসরণ করতে হবে:

import { useRef } from "react";
 
export default function MyForm() {
  const inputRef = useRef(null);
 
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

import { forwardRef } from "react";
 
const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});
 
export default MyInput;

পুরো কোডটি একত্রে দেখলে

পুরো প্রক্রিয়াটি দেখতে হলে আমাদের প্যারেন্ট এবং চাইল্ড কম্পোনেন্ট উভয়ের কোডগুলো নিচের মতো হবে:

// MyInput.js
import { forwardRef } from "react";
 
const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});
 
export default MyInput;

// MyForm.js
import { useRef } from "react";
import MyInput from "./MyInput";
 
export default function MyForm() {
  const inputRef = useRef(null);
 
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

এবার যদি আমরা আউটপুটে যাই এবং বাটনে ক্লিক করি, তাহলে ইনপুট ফিল্ডটিতে ফোকাস হবে।

কেন forwardRef দরকার?

স্বাভাবিকভাবে, কম্পোনেন্ট গুলো তাদের নোডের রেফারেন্স বাইরে শেয়ার করে না কারণ এতে কম্পোনেন্ট আন-এক্সপেক্টেড আচরণ করতে পারে। এটি রিয়াক্টের প্রাইভেসি এবং মডুলারিটির জন্য তৈরি করা। কিন্তু কিছু বিশেষ ক্ষেত্রে, যেমন আমাদের উদাহরণে দেখানো হলো, এই আচরণটিকে কাস্টমাইজ করার প্রয়োজন হতে পারে। forwardRef API ব্যবহার করে, React আমাদের সেই সুবিধা দিয়েছে যেখানে আমরা প্রয়োজন অনুযায়ী রেফারেন্সগুলো সরাসরি অন্য কম্পোনেন্টে ফরওয়ার্ড করতে পারি।