एक custom component को पास किया गया ref इसके अंदर DOM node तक स्वचालित रूप से नहीं पहुंचता है। forwardRef एक component को ref प्राप्त करने और इसे एक child element से attach करने देता है। useImperativeHandle अनुकूलित करता है कि वह ref क्या expose करता है।
= ( () {
;
});
ref = ();
;
कभी-कभी आप पूरा DOM node leak नहीं करना चाहते हैं — केवल specific methods:
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();
Communication के लिए props/state को प्राथमिकता दें। Refs के लिए केवल सच में imperative आवश्यकताओं के लिए पहुंचें: focus management, scrolling, text selection, media playback, या imperative libraries को एकीकृत करना। नोट: React 19 में, ref को एक सामान्य prop के रूप में पास किया जा सकता है, इसलिए forwardRef अक्सर अब आवश्यक नहीं है।