React इव्हेंट हँडलिंग गाईड

तुम्ही बटणावर क्लिक केल्यावर तुमचे संपूर्ण वेब पेज रीलोड होते का? टाईप करताना तुमचे इनपुट बॉक्स स्टेट (state) अपडेट करण्यास अपयशी ठरते का? जर तुम्ही React मध्ये इव्हेंट्स योग्यरित्या हाताळले नाहीत, तर तुम्हाला या समस्यांचा सामना करावा लागू शकतो.

इव्हेंट हँडलिंग म्हणजे क्लिक्स, सबमिट्स किंवा बदल यांसारख्या युजरच्या कृती (actions) टिपणे आणि त्यांना प्रतिसाद देणे. React SyntheticEvent नावाच्या सिस्टमचा वापर करते. यामुळे तुमचे कोड Chrome, Safari आणि Firefox सारख्या सर्व ब्राउझर्समध्ये सारख्याच पद्धतीने काम करतील याची खात्री मिळते.

HTML आणि React इव्हेंट्समधील मुख्य फरक:

  • नेमिंग (Naming): React मध्ये camelCase वापरा. onclick ऐवजी onClick वापरा.
  • हँडलर्स (Handlers): React मध्ये फंक्शनचा संदर्भ (reference) पास करा. स्ट्रिंग्सऐवजी कर्ली ब्रेसेस {} वापरा.
  • प्रिव्हेंशन (Prevention): ब्राउझरचे डीफॉल्ट वर्तन थांबवण्यासाठी नेहमी event.preventDefault() कॉल करा.

React इव्हेंट्स कसे हाताळते:

React प्रत्येक नोडला स्वतंत्रपणे लिसनर्स जोडत नाही. ते Event Delegation वापरते. ते रूट एलिमेंटला एकच लिसनर जोडते. यामुळे मेमरी वाचते आणि परफॉर्मन्स सुधारतो.

वापरण्यासाठी सामान्य पॅटर्न:

  • क्लिक काउंटर (Click Counter): युजरने बटणावर क्लिक केल्यावर स्टेट अपडेट करण्यासाठी फंक्शन वापरा.
  • फॉर्म हँडलिंग (Form Handling): एकाच फंक्शनद्वारे अनेक इनपुट फील्ड्स अपडेट करण्यासाठी event.target.name आणि event.target.value वापरा. पेज रीलोड होण्यापासून रोखण्यासाठी फॉर्म सबमिट करताना नेहमी event.preventDefault() वापरा.
  • आर्ग्युमेंट्स पास करणे (Passing Arguments): जर तुम्हाला फंक्शनला ID पास करायचा असेल, तर arrow function वापरा. onClick={() => handleDelete(id)} असे लिहा. onClick={handleDelete(id)} असे लिहू नका, कारण ते रेंडरिंग दरम्यान लगेच रन होते.

या चुका टाळा:

  • इन्फिनिट लूप्स (Infinite Loops): onClick ॲट्रिब्युटमध्ये कधीही फंक्शन थेट कॉल करू नका. यामुळे रेंडरिंग दरम्यान स्टेट अपडेट ट्रिगर होते, ज्यामुळे पुन्हा रेंडरिंग होते.
  • अनडिफाइन्ड इव्हेंट्स (Undefined Events): जर तुम्हाला preventDefault() कॉल करायचे असेल, तर तुमच्या फंक्शन डेफिनेशनमध्ये नेहमी event पॅरामीटर समाविष्ट करा.
  • मेमरी लीक्स (Memory Leaks): जर तुम्ही useEffect हुक मध्ये window.addEventListener सारखे मॅन्युअल लिसनर्स जोडले असतील, तर क्लीनअप फंक्शनमध्ये ते नेहमी काढून टाका.

परफॉर्मन्ससाठी सर्वोत्तम पद्धती:

  • जर तुमची लिस्ट खूप मोठी असेल, तर .map() लूपच्या आत नवीन फंक्शन्स तयार करणे टाळा.
  • चाइल्ड कंपोनंट्सना हँडलर्स पास करताना useCallback हुक वापरा.
  • तुमचे ॲप फास्ट ठेवण्यासाठी कस्टम इव्हेंट लिसनर्स क्लीन अप करा.

इव्हेंट्समध्ये प्रभुत्व मिळवणे ही इंटरअॅक्टिव्ह React ॲप्लिकेशन्स तयार करण्याची गुरुकिल्ली आहे.

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