useImperativeHandle

Controlling Access to Child Component's Methods with useImperativeHandle

React-এ forwardRef ব্যবহার করে আমরা সহজেই কোনো কাস্টম কম্পোনেন্টের ref প্যারেন্ট কম্পোনেন্টে ফরোয়ার্ড করতে পারি। কিন্তু এটি প্যারেন্ট কম্পোনেন্টকে সেই চাইল্ড কম্পোনেন্টের সকল DOM নোডের এক্সেস দিয়ে দেয়, যা অনেক সময় অপ্রয়োজনীয় হতে পারে। ধরুন, আমরা শুধু বিশেষ কয়েকটি মেথড এক্সেস করতে দিতে চাই, তাহলে useImperativeHandle ব্যবহার করা যায়।

useImperativeHandle মূলত forwardRef-এর সাথে ব্যবহার করা হয়। এটি চাইল্ড কম্পোনেন্ট থেকে নির্দিষ্ট মেথড বা প্রপার্টি প্যারেন্ট কম্পোনেন্টে প্রকাশ করার জন্য ব্যবহৃত হয়। এভাবে চাইল্ড কম্পোনেন্টটি বাইরে থেকে সীমিত ভাবে নিয়ন্ত্রণ করা যায় এবং কম্পোনেন্টের অভ্যন্তরীণ স্ট্রাকচারও গোপন রাখা সম্ভব।

ব্যবহারের উদ্দেশ্য

React-এর forwardRef এবং useImperativeHandle ব্যবহারের মাধ্যমে প্যারেন্ট-চাইল্ড কম্পোনেন্টের মধ্যে DOM এর এক্সেস নিয়ন্ত্রণ করা যায়।

১. Encapsulation: শুধু প্রয়োজনীয় মেথড বা প্রপার্টি প্রকাশ করা, যেন চাইল্ড কম্পোনেন্টের অভ্যন্তরীণ বিষয়গুলো গোপন থাকে। ২. Controlled Access: প্যারেন্ট কম্পোনেন্টে প্রয়োজনীয় কয়েকটি ফাংশনালিটি প্রকাশ করা, যা কম্পোনেন্টের অবাঞ্ছিত মেথডে এক্সেস আটকাতে সাহায্য করে।

উদাহরণ দিয়ে বোঝা যাক useImperativeHandle কীভাবে কাজ করে

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

import { forwardRef, useRef, useImperativeHandle } from "react";
 
const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
 
  // প্যারেন্ট কম্পোনেন্টকে শুধু focus মেথড অ্যাক্সেসযোগ্য রাখা
  useImperativeHandle(ref, () => ({
    focus() {
      realInputRef.current.focus();
    },
  }));
 
  return <input {...props} ref={realInputRef} />;
});

import { useRef } from "react";
import MyInput from "./MyInput";
 
export default function MyForm() {
  const inputRef = useRef(null);
 
  function handleClick() {
    // শুধু focus মেথড এক্সেসযোগ্য
    inputRef.current.focus();
  }
 
  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

কেন useImperativeHandle দরকার?

আমরা চাইলে শুধু forwardRef দিয়েই ref এক্সেস করতে পারতাম, তবে এতে পুরো DOM নোড প্যারেন্ট কম্পোনেন্টে প্রকাশ পায়। কিন্তু যদি আমরা কোনো সীমাবদ্ধতা রাখতে চাই, তাহলে useImperativeHandle ব্যবহার উপকারী। এতে আমাদের কম্পোনেন্টের গোপনীয়তা বজায় থাকে এবং প্যারেন্ট কম্পোনেন্ট শুধু প্রয়োজনীয় মেথড বা প্রপার্টি অ্যাক্সেস করতে পারে।

এই কৌশলটি বিশেষভাবে প্রয়োজনীয় হয় যখন বড় প্রজেক্টে কোনো কম্পোনেন্টের DOM এক্সেস সীমিত করা প্রয়োজন হয়, এবং আমাদের উচিত কম্পোনেন্টকে যতটা সম্ভব encapsulated বা গোপনীয় রাখা।