একটি কাস্টম কম্পোনেন্টে পাস করা ref স্বয়ংক্রিয়ভাবে এর ভিতরের DOM নোডে পৌঁছায় না। forwardRef একটি কম্পোনেন্টকে ref গ্রহণ করতে এবং এটিকে একটি চাইল্ড এলিমেন্টের সাথে সংযুক্ত করতে দেয়। useImperativeHandle সেই ref কী প্রকাশ করে তা কাস্টমাইজ করে।
= ( () {
;
});
ref = ();
;
কখনও কখনও আপনি সম্পূর্ণ DOM নোড প্রকাশ করতে চান না — শুধুমাত্র নির্দিষ্ট পদ্ধতি:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
যোগাযোগের জন্য props/state পছন্দ করুন। refs শুধুমাত্র সত্যিকারের বাধ্যতামূলক প্রয়োজনের জন্য ব্যবহার করুন: ফোকাস ম্যানেজমেন্ট, স্ক্রলিং, টেক্সট সিলেকশন, মিডিয়া প্লেব্যাক, বা বাধ্যতামূলক লাইব্রেরি একীভূত করা। নোট: React 19-এ, ref একটি সাধারণ prop হিসাবে পাস করা যায়, তাই forwardRef প্রায়শই আর প্রয়োজনীয় নয়।