React Refs اور useRef Hook کا استعمال
React ایک declarative طریقہ کار استعمال کرتا ہے۔ آپ state کو اپ ڈیٹ کرتے ہیں، اور React UI کو اپ ڈیٹ کر دیتا ہے۔ یہ زیادہ تر کاموں کے لیے کارآمد ہے۔
لیکن کبھی کبھی آپ کو Virtual DOM سے باہر نکلنے کی ضرورت پڑتی ہے۔ ہو سکتا ہے کہ آپ کو براہ راست کسی حقیقی HTML element کو چھونے (touch کرنے) کی ضرورت ہو۔ یہیں پر Refs اور useRef hook کام آتے ہیں۔
Ref کیا ہے؟ Ref ایک pointer ہے۔ یہ React کو براہ راست ایک native DOM node سے جوڑتا ہے۔
useState کے بجائے useRef کیوں استعمال کریں؟ State کی اپ ڈیٹس re-render کا سبب بنتی ہیں۔ اس کا مطلب ہے کہ React اسکرین پر component کو دوبارہ ڈرا (redraw) کرتا ہے۔ Ref کی اپ ڈیٹس re-render کا سبب نہیں بنتیں۔ یہ انہیں ایسی ویلیوز کے لیے بہترین بناتا ہے جو تبدیل تو ہوتی ہیں لیکن انہیں فوری طور پر UI میں دکھانے کی ضرورت نہیں ہوتی۔
عام استعمال کے مواقع: • کسی input field کو خودکار طور پر focus کرنا۔ • ویڈیو یا آڈیو elements کو کنٹرول کرنا (play/pause)۔ • کسی element کی چوڑائی (width) یا اونچائی (height) ناپنا۔ • intervals یا timeouts کے لیے timer IDs کو محفوظ کرنا۔
useRef کو کیسے استعمال کریں:
- React سے
useRefکو import کریں۔ - اسے initialize کریں:
const myRef = useRef(null)۔ - اسے کسی element کے ساتھ جوڑیں:
<input ref={myRef} />۔ - ویلیو تک اس طرح رسائی حاصل کریں:
myRef.current۔
مثال 1: Input کو خودکار طور پر focus کرنا
جب کوئی صارف صفحہ پر آتا ہے، تو آپ چاہتے ہیں کہ کرسر ٹیکسٹ باکس میں ہو۔ آپ component کے mount ہونے کے بعد myRef.current.focus() کو کال کرنے کے لیے useEffect کا استعمال کرتے ہیں۔
مثال 2: ایک اسٹاپ واچ (Stopwatch)
اگر آپ setInterval کی ID کو state میں محفوظ کرتے ہیں، تو ہر بار جب ٹائمر چلتا ہے، component re-render ہوتا ہے۔ یہ عمل سست ہے۔ اگر آپ ID کو ref میں محفوظ کرتے ہیں، تو component تیز رہتا ہے۔ ویلیو re-renders کے دوران محفوظ رہتی ہے اور براؤزر پر اضافی بوجھ نہیں ڈالتی۔
State بمقابلہ Ref: • State: Re-render کا سبب بنتی ہے۔ UI ڈیٹا کے لیے استعمال ہوتی ہے۔ اپ ڈیٹس asynchronous ہوتی ہیں۔ • Ref: Re-render کا سبب نہیں بنتی۔ DOM تک رسائی اور میموری کے لیے استعمال ہوتی ہے۔ اپ ڈیٹس synchronous ہوتی ہیں۔
سینئرز (Seniors) کے لیے پرو ٹپس:
• ضرورت سے زیادہ استعمال سے گریز کریں۔ Refs کا استعمال صرف تب کریں جب declarative logic ناکام ہو جائے۔
• میموری کو کلین اپ (clean up) کریں۔ ہمیشہ اپنے cleanup function میں intervals یا event listeners کو clear کریں۔
• Rendering کے دوران refs میں لکھیں نہیں۔ ref.current کو صرف useEffect یا event handlers کے اندر اپ ڈیٹ کریں۔ یہ side effects سے بچاتا ہے۔
• forwardRef کا استعمال کریں۔ اگر آپ کسی custom child component کو ref بھیجنا چاہتے ہیں، تو آپ کو اس child کو React.forwardRef میں لپیٹنا (wrap کرنا) ہوگا۔
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde