اگر آپ ایک React ڈویلپر ہیں جنہوں نے ابھی تک React ہکس کے بارے میں نہیں سیکھا ہے، تو اب وہ لمحہ ہے۔ یہ پوسٹ تفصیل سے افیکٹ ری ایکٹ ہک کے استعمال سے گزرے گی۔ یہ سوئس آرمی چاقو کے ہک کے برابر ہے۔ یہ مختلف قسم کے مسائل کو حل کرتا ہے، جیسے کہ جب کوئی جزو ماؤنٹ ہوتا ہے تو ڈیٹا کیسے حاصل کیا جائے، اسٹیٹ یا پروپ تبدیل ہونے پر کوڈ کو کیسے چلایا جائے، ٹائمر یا وقفے کیسے مرتب کیے جائیں، وغیرہ۔
ایک UseEffect استعمال کیا جاتا ہے جو کچھ بھی آپ React جزو میں "کرنا" چاہتے ہیں جو JSX (کسی قسم کا ضمنی اثر) واپس نہیں کر رہا ہے۔ آپ کو فی جزو کے متعدد استعمال کے اثرات بھی ہوسکتے ہیں۔
یہ تمام طاقت ایک قیمت پر آتی ہے: جب تک آپ یہ نہیں سمجھتے کہ یہ کیسے کام کرتی ہے، یہ پریشان کن ہوسکتی ہے۔ اس پوسٹ میں، ہم متعدد مثالیں دیکھیں گے تاکہ آپ تصوراتی ماڈل کو سمجھ سکیں اور اسے اپنے کوڈ پر لاگو کر سکیں۔
رد عمل ہکس - یہ کیا حل کرنے کی کوشش کر رہا ہے؟
ہکس کو سب سے پہلے React ورژن 16.8 میں متعارف کرایا گیا تھا اور اب اسے بہت سے React پروجیکٹس کے ذریعے استعمال کیا جاتا ہے۔ ہکس اجزاء کے درمیان کوڈ کی تکرار کے مسئلے پر قابو پاتا ہے۔ وہ کلاسوں کے استعمال کے بغیر لکھے گئے ہیں۔ اس کا مطلب یہ نہیں ہے کہ React کلاسز کو چھوڑ رہا ہے۔ ہکس صرف ایک متبادل طریقہ ہے۔
React آپ کو ریاستی منطق کے ساتھ فوری طور پر جدید ترین اجزاء بنانے کی اجازت دیتا ہے۔ ان اجزاء کو الگ کرنا مشکل ہے کیونکہ کلاس React لائف سائیکل طریقوں پر انحصار کرتی ہے۔ یہ وہ جگہ ہے جہاں ری ایکٹ ہکس آتے ہیں۔
وہ آپ کو ایک جزو کو چھوٹے افعال میں تقسیم کرنے کی اجازت دیتے ہیں۔ لائف سائیکل طریقوں کی بنیاد پر کوڈ کو چھوٹے چھوٹے ٹکڑوں میں تقسیم کرنے کے بجائے، اب آپ فعالیت کے لحاظ سے کوڈ کو چھوٹی اکائیوں میں ترتیب دے سکتے ہیں اور الگ کر سکتے ہیں۔
UseEffect Hook کیا ہے؟
ہکس ایسے فنکشن ہیں جو آپ کو ES6 کلاسز لکھے بغیر ریاست اور دیگر رد عمل کی صلاحیتوں تک رسائی کی اجازت دیتے ہیں۔ ری ایکٹ ہکس API میں ایک ہک ہے جسے useEffect کہتے ہیں۔ اگر آپ ری ایکٹ لائف سائیکل سے واقف ہیں، تو UseEffect ہک وہی ہے جو componentDidMount, componentDidUpdate، اور componentWillUnmount زندگی سائیکل کے طریقوں کو مشترکہ.
React Hooks کی دستاویزات کے مطابق، اسے ES6 کلاس کے جزو لائف سائیکل طریقوں سے کچھ مسائل حل کرنے کے لیے بنایا گیا تھا۔
نحو
پہلی دلیل ایک کال بیک فنکشن ہے، جو ہر رینڈر کے بعد بطور ڈیفالٹ عمل میں آتی ہے۔ دوسرا پیرامیٹر ایک اختیاری انحصار سرنی ہے جو ہک کو صرف اس صورت میں کال بیک کرنے کی ہدایت کرتا ہے جب ہدف کی حالت بدل جائے۔
ہک ہر انحصار کی تاریخی اور موجودہ ریاستوں کا موازنہ کرتا ہے۔ اگر دو قدریں مماثل نہیں ہیں، تو ہک پہلے پیرامیٹر میں بیان کردہ کال بیک کو طلب کرتا ہے۔ انحصار کی صفیں معمول کے کال بیک رویے کو تبدیل کرتی ہیں اور اس بات کی ضمانت دیتی ہیں کہ ہک اجزاء کے دائرہ کار میں موجود دیگر تمام اجزاء کو نظر انداز کر دیتا ہے۔
بنیادی استعمال
ایک پیغام کو محفوظ کرنے کے لیے، میں اوپر دیے گئے کوڈ کے نمونے میں React useState استعمال کر رہا ہوں۔ اس کے بعد، میں اپنا میسج اسٹیٹ ویری ایبل لیتا ہوں اور اسے اسکرین پر پرنٹ کرتا ہوں۔ تاہم، اب میں جزو کے نصب ہونے کے ایک سیکنڈ بعد پیغام میں ترمیم کرنے کے لیے اثر کا استعمال کرنا چاہتا ہوں۔
میں نے React فریم ورک سے useEffect درآمد کرنے کے بعد UseState لائن کے پیچھے اپنا اثر ڈال دیا ہے۔ ایفیکٹ کو استعمال کرنے کے لیے پہلا پیرامیٹر ایک فنکشن ہے۔ جب یہ فنکشن ہینڈلر عمل میں آتا ہے، تو یہ آپ کے فراہم کردہ کسی بھی ضمنی اثرات کا خیال رکھے گا۔ فنکشن ایک کال بیک فنکشن ہے جسے اس وقت کہا جاتا ہے جب React جزو لائف سائیکل ایونٹس میں سے ایک ہوتا ہے۔
اسے کب استعمال کرنا ہے؟
UseEffect ہک مختلف حالات میں مفید ہو سکتا ہے۔ مندرجہ ذیل سب سے اہم ہیں:
- جب ہم فراہم کردہ دلیل کی بنیاد پر ڈیٹا حاصل کرنا چاہتے ہیں تو ہم کلائنٹ کی طرف سے اس پیرامیٹر کو تبدیل کر سکتے ہیں۔ پیرامیٹر کو تازہ ڈیٹا کے ساتھ اپ ڈیٹ کرنے کے بعد اسے واپس بلایا جائے گا۔
- اگر ہم API اینڈ پوائنٹ سے ڈیٹا بازیافت کرنا چاہتے ہیں اور اسے کلائنٹ سائڈ پر ڈسپلے کرنا چاہتے ہیں۔ جب ہمارا جزو رینڈر ہوتا ہے، تو UseEffect ہک کو دیئے گئے فنکشن یا ہینڈلر پر عمل درآمد کیا جاتا ہے، اور اجزاء کی حالتوں میں موجود ڈیٹا کو بازیافت کیا جاتا ہے۔ پھر یہ سٹیٹس یوزر انٹرفیس کے اجزاء میں استعمال کیے جاتے ہیں۔
- جب آپ کا جزو بیرونی دنیا کے ڈیٹا پر انحصار کرتا ہے اور ہم اس بات کو یقینی نہیں بنا سکتے کہ ڈیٹا آئے گا، تو ہمیں اثر استعمال کرنا چاہیے (شاید سرور وہاں بند ہو)۔ مسائل کو پھینکنے اور دوسرے اجزاء کو ظاہر ہونے سے روکنے کے بجائے، انہیں useEffect ہک میں رکھیں۔
استعمال کے مقدمات
اگر جزو پہلے رن کے بعد دوبارہ پیش کرتا ہے، تو اس پر عمل نہیں ہوگا۔
جب بھی کوئی جزو رینڈر یا ری رینڈر کرتا ہے، اسے ہمیشہ عمل میں لانا چاہیے۔
پہلے سے طے شدہ طور پر، پروگرام صرف ایک بار چلتا ہے۔ اس کے بعد، اگر سہارے کی قدریں بدل جاتی ہیں، تو چلائیں:
غیر مطابقت پذیر سرگرمیوں کے لیے، ہمیشہ useEffect استعمال کریں۔
useEffect کوڈ بلاکس آپ کے ساتھی ڈویلپرز کے لیے غیر مطابقت پذیر ملازمتوں کے واضح نشانات ہیں۔ useEffect کا استعمال کیے بغیر غیر مطابقت پذیر کوڈ بنانا ممکن ہے، لیکن یہ "رد عمل کا طریقہ" نہیں ہے اور یہ پیچیدگی اور غلطیوں کا خطرہ دونوں کو بڑھاتا ہے۔
غیر مطابقت پذیر کوڈ لکھنے کے بجائے useEffect کا استعمال کرنا جو UI کو روک سکتا ہے React کمیونٹی میں ایک معروف تکنیک ہے، خاص طور پر جس طرح سے React ٹیم نے اسے ضمنی اثر انجام دینے کے لیے بنایا ہے۔
اسے استعمال کرنے کا ایک اور فائدہ یہ ہے کہ ڈویلپرز آسانی سے کوڈ کا جائزہ لے سکتے ہیں اور فوری طور پر اس کوڈ کا پتہ لگا سکتے ہیں جو "کنٹرول کے بہاؤ سے باہر" چلایا جاتا ہے، جو پہلے رینڈر سائیکل کے بعد ہی اہم ہو جاتا ہے۔ مزید برآں، بلاکس دوبارہ قابل استعمال اور اس سے بھی زیادہ سیمنٹک کسٹم ہکس میں نکالنے کے لیے موزوں ہیں۔
ایک مثال
UseEffect کوڈ کا استعمال کرتے ہوئے، ایک نمبر فی سیکنڈ میں اضافہ کریں۔
نتیجہ
میرے خیال میں، اگر آپ اگلے درجے کے React ڈویلپر بننا چاہتے ہیں تو بنیادی ڈیزائن کے اصولوں اور UseEffect Hook کے بہترین طریقوں کو سمجھنا، سیکھنا ایک اہم ہنر ہے۔
خلاصہ کرنے کے لیے، useEffect Hook ایک فنکشن حاصل کرتا ہے جس میں لازمی، ممکنہ طور پر مکمل منطق کا اثر ہوتا ہے۔ انحصار سرنی، جو دوسرا پیرامیٹر ہے، عملدرآمد کو متاثر کرنے کے لیے استعمال کیا جا سکتا ہے۔ اس سے نمٹنے کے دوران، ریٹرن فنکشن کا استعمال کرتے ہوئے صفائی کوڈ لکھنا بھی ضروری ہے۔
اگر مضمون مددگار تھا تو ہمیں تبصرے میں بتائیں۔
جواب دیجئے