React Hook کے اصول
ہر چیز کے لیے useEffect کا استعمال بند کریں۔ بہت سے ڈویلپرز اس ہک (hook) کا غلط استعمال کرتے ہیں۔ اس سے بگ (bugs) پیدا ہوتے ہیں اور کوڈ کو پڑھنا مشکل ہو جاتا ہے۔
useEffect کے استعمال کو محدود کریں۔
فی پیج ایک useEffect استعمال کرنے کی کوشش کریں۔ ایک ہی اسٹیٹ (state) کے لیے بہت سے ہکس کا استعمال الجھن کا باعث بنتا ہے۔ آپ اس بات کا سراغ کھو دیتے ہیں کہ کون سا ہک کس اسٹیٹ کو اپ ڈیٹ کر رہا ہے۔
یوزر ایونٹس (user events) کے لیے useEffect کا استعمال بند کریں۔
کلکس (clicks) یا ٹیپس (taps) کے لیے useEffect کا استعمال نہ کریں۔ اس کے بجائے ایونٹ ہینڈلرز (event handlers) استعمال کریں۔
- غلط: کلک کے بعد اسٹیٹ کو اپ ڈیٹ کرنے کے لیے useEffect کا استعمال کرنا۔
- درست: اسٹیٹ کو اپ ڈیٹ کرنے کے لیے
onClickBarجیسا فنکشن استعمال کریں۔
وہ ایونٹ کی اقسام جنہیں آپ کو معلوم ہونا چاہیے:
- پیج نیویگیشن اور ابتدائی رینڈرز (initial renders)۔
- نیٹ ورک کنکشن میں تبدیلیاں۔
- WebSocket یا ریئل ٹائم سرور اپ ڈیٹس۔
کلکس جیسے یوزر ایکشنز useEffect کا حصہ نہیں ہونے چاہئیں۔ ان ایکشنز کے لیے براہ راست ایونٹ ہینڈلرز استعمال کریں۔
پراپس (props) کے ذریعے کمپوننٹس کو تقسیم کریں۔
اگر آپ لاجک تبدیل کرنے کے لیے بولین پراپ (boolean prop) استعمال کرتے ہیں، تو اپنے کمپوننٹ کو تقسیم کر دیں۔ ایسا ایک کمپوننٹ نہ بنائیں جو ڈیٹا بنانے اور اپ ڈیٹ کرنے، دونوں کو سنبھالتا ہو۔
بہت سے "if" سٹیٹمنٹس والا ایک ہی کمپوننٹ بہت بڑا ہو جاتا ہے۔ اس سے ایپ کو برقرار رکھنا (maintain کرنا) مشکل ہو جاتا ہے۔
- غلط: ایک کمپوننٹ جس میں "isAdd" پراپ ہو جو فارم فیلڈز کو تبدیل کرتا ہو۔
- درست: ایک "RegisterComponent" اور ایک "UpdateComponent" بنائیں۔
چھوٹے کمپوننٹس کو ٹیسٹ کرنا آسان ہوتا ہے۔ وہ تیزی سے چلتے ہیں۔ وہ صاف ستھرے رہتے ہیں۔
ماخذ: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31