React ایونٹ ہینڈلنگ گائیڈ

کیا بٹن پر کلک کرنے سے آپ کا پورا ویب پیج ری لوڈ ہو جاتا ہے؟ کیا ٹائپ کرتے وقت آپ کا ان پٹ باکس اسٹیٹ (state) کو اپ ڈیٹ کرنے میں ناکام رہتا ہے؟ اگر آپ React میں ایونٹس کو صحیح طریقے سے ہینڈل نہیں کرتے ہیں تو آپ کو ان مسائل کا سامنا کرنا پڑ سکتا ہے۔

ایونٹ ہینڈلنگ کا مطلب ہے صارف کے اقدامات جیسے کلکس (clicks)، سبمٹس (submits)، یا تبدیلیوں (changes) کو کیپچر کرنا اور ان پر ردعمل دینا۔ React ایک سسٹم استعمال کرتا ہے جسے SyntheticEvent کہا جاتا ہے۔ یہ اس بات کو یقینی بناتا ہے کہ آپ کا کوڈ Chrome، Safari، اور Firefox جیسے تمام براؤزرز پر ایک ہی طرح سے کام کرے۔

HTML اور React ایونٹس کے درمیان اہم فرق:

• Naming: React میں camelCase استعمال کریں۔ onclick کے بجائے onClick استعمال کریں۔
• Handlers: React میں فنکشن کا ریفرنس پاس کریں۔ اسٹرنگز کے بجائے کرلی بریکٹس {} استعمال کریں۔
• Prevention: براؤزر کے ڈیفالٹ رویے کو روکنے کے لیے ہمیشہ event.preventDefault() کال کریں۔

React ایونٹس کو کیسے ہینڈل کرتا ہے:

React ہر ایک نوڈ (node) کے ساتھ لسنرز (listeners) نہیں جوڑتا۔ یہ Event Delegation استعمال کرتا ہے۔ یہ روٹ ایلیمنٹ (root element) کے ساتھ ایک ہی لسنر جوڑتا ہے۔ اس سے میموری بچتی ہے اور کارکردگی (performance) بہتر ہوتی ہے۔

استعمال کے لیے عام پیٹرنز:

• Click Counter: جب صارف بٹن پر کلک کرے تو اسٹیٹ کو اپ ڈیٹ کرنے کے لیے ایک فنکشن استعمال کریں۔
• Form Handling: ایک ہی فنکشن کے ذریعے متعدد ان پٹ فیلڈز کو اپ ڈیٹ کرنے کے لیے event.target.name اور event.target.value استعمال کریں۔ پیج ری لوڈ کو روکنے کے لیے فارم سبمٹ کرتے وقت ہمیشہ event.preventDefault() استعمال کریں۔
• Passing Arguments: اگر آپ کو کسی فنکشن میں ID پاس کرنے کی ضرورت ہے، تو ایرو فنکشن (arrow function) استعمال کریں۔ onClick={() => handleDelete(id)} لکھیں۔ onClick={handleDelete(id)} نہ لکھیں کیونکہ یہ رینڈر (render) کے دوران فوری طور پر چل جاتا ہے۔

ان غلطیوں سے بچیں:

• Infinite Loops: کبھی بھی onClick ایٹریبیوٹ میں براہ راست فنکشن کال نہ کریں۔ یہ رینڈر کے دوران اسٹیٹ اپ ڈیٹ کو ٹرگر کرتا ہے، جس سے دوبارہ رینڈر ہوتا ہے۔
• Undefined Events: اگر آپ کو preventDefault() کال کرنے کی ضرورت ہے تو اپنی فنکشن ڈیفینیشن میں ہمیشہ event پیرامیٹر شامل کریں۔
• Memory Leaks: اگر آپ useEffect ہوک میں window.addEventListener جیسے دستی لسنرز شامل کرتے ہیں، تو انہیں ہمیشہ کلین اپ (cleanup) فنکشن میں ہٹا دیں۔

کارکردگی کے لیے بہترین طریقے:

• اگر آپ کی لسٹ بہت بڑی ہے تو .map() لوپ کے اندر نئے فنکشنز بنانے سے گریز کریں۔
• چائلڈ کمپوننٹس (child components) کو ہینڈلرز پاس کرتے وقت useCallback ہوک استعمال کریں۔
• اپنی ایپ کو تیز رکھنے کے لیے کسٹم ایونٹ لسنرز کو کلین اپ کریں۔

ایونٹس پر مہارت حاصل کرنا انٹرایکٹو React ایپلی کیشنز بنانے کی کلید ہے۔

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69