React Event Handling ഗൈഡ്

ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ നിങ്ങളുടെ വെബ് പേജ് മുഴുവനായി റീലോഡ് ആകുന്നുണ്ടോ? ടൈപ്പ് ചെയ്യുമ്പോൾ ഇൻപുട്ട് ബോക്സിലെ സ്റ്റേറ്റ് (state) അപ്‌ഡേറ്റ് ആകുന്നില്ലേ? React-ൽ ഇവന്റുകൾ ശരിയായി കൈകാര്യം ചെയ്തില്ലെങ്കിൽ നിങ്ങൾക്ക് ഇത്തരം പ്രശ്നങ്ങൾ നേരിടേണ്ടി വന്നേക്കാം.

ക്ലിക്കുകൾ, സബ്മിറ്റുകൾ അല്ലെങ്കിൽ മാറ്റങ്ങൾ പോലുള്ള ഉപയോക്താവിന്റെ പ്രവർത്തനങ്ങൾ (user actions) തിരിച്ചറിയുകയും അവയ്ക്ക് പ്രതികരിക്കുകയും ചെയ്യുന്നതിനെയാണ് ഇവന്റ് ഹാൻഡ്‌ലിംഗ് (Event handling) എന്ന് പറയുന്നത്. React ഇതിനായി SyntheticEvent എന്ന സംവിധാനം ഉപയോഗിക്കുന്നു. ഇത് Chrome, Safari, Firefox തുടങ്ങിയ എല്ലാ ബ്രൗസറുകളിലും നിങ്ങളുടെ കോഡ് ഒരേപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

HTML-ഉം React ഇവന്റുകളും തമ്മിലുള്ള പ്രധാന വ്യത്യാസങ്ങൾ:

• പേര് നൽകുന്നത് (Naming): React-ൽ camelCase ഉപയോഗിക്കുക. onclick എന്നതിന് പകരം onClick ഉപയോഗിക്കുക.
• ഹാൻഡ്‌ലറുകൾ (Handlers): React-ൽ ഒരു ഫംഗ്ഷൻ റഫറൻസ് പാസ് ചെയ്യുക. സ്ട്രിംഗുകൾക്ക് (strings) പകരം കർലി ബ്രേസസ് (curly braces) ഉപയോഗിക്കുക.
• തടയൽ (Prevention): ബ്രൗസറിന്റെ ഡിഫോൾട്ട് പെരുമാറ്റം തടയാൻ എപ്പോഴും event.preventDefault() വിളിക്കുക.

React എങ്ങനെയാണ് ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നത്:

React ഓരോ നോഡിലും (node) ലിസണറുകൾ (listeners) ഘടിപ്പിക്കാറില്ല. ഇത് Event Delegation എന്ന രീതിയാണ് ഉപയോഗിക്കുന്നത്. ഇത് റൂട്ട് എലമെന്റിൽ (root element) ഒരു സിംഗിൾ ലിസണർ മാത്രം ഘടിപ്പിക്കുന്നു. ഇത് മെമ്മറി ലാഭിക്കാനും പെർഫോമൻസ് മെച്ചപ്പെടുത്താനും സഹായിക്കുന്നു.

ഉപയോഗിക്കേണ്ട പൊതുവായ രീതികൾ:

• 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 പോലുള്ള മാനുവൽ ലിസണറുകൾ നിങ്ങൾ ചേർക്കുന്നുണ്ടെങ്കിൽ, ക്ലീനപ്പ് ഫംഗ്ഷനിൽ (cleanup function) അവ എപ്പോഴും നീക്കം ചെയ്യുക.

പെർഫോമൻസിനായുള്ള മികച്ച രീതികൾ:

• നിങ്ങളുടെ ലിസ്റ്റ് വളരെ വലുതാണെങ്കിൽ .map() ലൂപ്പിനുള്ളിൽ പുതിയ ഫംഗ്ഷനുകൾ നിർമ്മിക്കുന്നത് ഒഴിവാക്കുക.
• ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് (child components) ഹാൻഡ്‌ലറുകൾ പാസ് ചെയ്യുമ്പോൾ useCallback ഹുക്ക് ഉപയോഗിക്കുക.
• നിങ്ങളുടെ ആപ്പ് വേഗത്തിൽ പ്രവർത്തിക്കാൻ കസ്റ്റം ഇവന്റ് ലിസണറുകൾ ക്ലീൻ അപ്പ് ചെയ്യുക.

ഇന്ററാക്ടീവ് ആയ React ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള പ്രധാന ഘടകം ഇവന്റുകളിൽ വൈദഗ്ധ്യം നേടുക എന്നതാണ്.

സ്രോതസ്സ്: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69