forwardRef اور useImperativeHandle کس لیے ہیں؟

Question

Accepted Answer

کسٹم کمپوننٹ کو منتقل کیا گیا `ref` خودکار طور پر اس کے اندر DOM نوڈ تک **نہیں** پہنچتا۔ **`forwardRef`** کمپوننٹ کو ref وصول کرنے اور اسے بچے کے عنصر میں منسلک کرنے دیتا ہے۔ **`useImperativeHandle`** اس بات کو کسٹمائز کرتا ہے کہ وہ ref *کیا* بے نقاب کرتا ہے۔ ## DOM نوڈ کو ref منتقل کرنا ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## خام نوڈ کی بجائے کسٹم API کو بے نقاب کرنا کبھی کبھی آپ مکمل DOM نوڈ کو ظاہر نہیں کرنا چاہتے — صرف مخصوص طریقے: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## اسے کب استعمال کریں (بہت کم) مواصلات کے لیے props/state کو ترجیح دیں۔ صرف حقیقی **لازمی** ضروریات کے لیے refs تک رسائی کریں: فوکس کا انتظام، اسکرولنگ، متن کی نشاندہی، میڈیا پلے بیک، یا لازمی لائبریری کو یکجا کرنا۔ نوٹ: **React 19** میں، `ref` عام prop کے طور پر منتقل کیا جا سکتا ہے، اس لیے `forwardRef` اب اکثر ضروری نہیں ہے۔