React Event Handling Guide

మీరు ఒక బటన్‌ను క్లిక్ చేసినప్పుడు మీ వెబ్ పేజీ మొత్తం రీలోడ్ అవుతుందా? మీరు టైప్ చేస్తున్నప్పుడు మీ ఇన్‌పుట్ బాక్స్ స్టేట్‌ను (state) అప్‌డేట్ చేయడంలో విఫలమవుతుందా? మీరు Reactలో ఈవెంట్‌లను సరిగ్గా హ్యాండిల్ చేయకపోతే ఇటువంటి సమస్యలను ఎదుర్కోవచ్చు.

ఈవెంట్ హ్యాండ్లింగ్ అంటే క్లిక్స్, సబ్మిట్స్ లేదా మార్పుల వంటి యూజర్ చర్యలను గుర్తించి (capturing), వాటికి స్పందించడం. React SyntheticEvent అనే వ్యవస్థను ఉపయోగిస్తుంది. ఇది మీ కోడ్ Chrome, Safari మరియు Firefox వంటి అన్ని బ్రౌజర్‌లలో ఒకే విధంగా పనిచేసేలా చూస్తుంది.

HTML మరియు React ఈవెంట్‌ల మధ్య ప్రధాన తేడాలు:

  • Naming: Reactలో camelCase ఉపయోగించండి. onclick కి బదులుగా onClick ఉపయోగించండి.
  • Handlers: Reactలో ఫంక్షన్ రిఫరెన్స్‌ను పాస్ చేయండి. స్ట్రింగ్స్‌కు బదులుగా కర్లీ బ్రేసెస్ {} ఉపయోగించండి.
  • Prevention: బ్రౌజర్ యొక్క డిఫాల్ట్ ప్రవర్తనను ఆపడానికి ఎల్లప్పుడూ event.preventDefault()ని కాల్ చేయండి.

React ఈవెంట్‌లను ఎలా హ్యాండిల్ చేస్తుంది:

React ప్రతి నోడ్‌కు విడివిడిగా లిజనర్‌లను (listeners) అటాచ్ చేయదు. ఇది Event Delegationను ఉపయోగిస్తుంది. ఇది రూట్ ఎలిమెంట్‌కు ఒకే ఒక లిజనర్‌ను అటాచ్ చేస్తుంది. దీనివల్ల మెమరీ ఆదా అవుతుంది మరియు పనితీరు (performance) మెరుగుపడుతుంది.

ఉపయోగించాల్సిన సాధారణ పద్ధతులు:

  • 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 వంటి మాన్యువల్ లిజనర్‌లను జోడిస్తే, క్లీనప్ ఫంక్షన్‌లో వాటిని ఎల్లప్పుడూ తొలగించండి.

Performance కోసం ఉత్తమ పద్ధతులు:

  • మీ లిస్ట్ చాలా పెద్దదిగా ఉంటే, .map() లూప్ లోపల కొత్త ఫంక్షన్‌లను సృష్టించడాన్ని నివారించండి.
  • చైల్డ్ కాంపోనెంట్స్‌కు హ్యాండ్లర్‌లను పాస్ చేసేటప్పుడు useCallback హుక్‌ను ఉపయోగించండి.
  • మీ యాప్‌ను వేగంగా ఉంచడానికి కస్టమ్ ఈవెంట్ లిజనర్‌లను క్లీన్ అప్ చేయండి.

ఈవెంట్‌లపై పట్టు సాధించడం అనేది ఇంటరాక్టివ్ React అప్లికేషన్‌లను నిర్మించడానికి కీలకం.

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