React ઇવેન્ટ હેન્ડલિંગ માર્ગદર્શિકા

શું બટન પર ક્લિક કરવાથી તમારું આખું વેબ પેજ રિલોડ થાય છે? શું ટાઇપ કરતી વખતે તમારું ઇનપુટ બોક્સ સ્ટેટ (state) અપડેટ કરવામાં નિષ્ફળ જાય છે? જો તમે React માં ઇવેન્ટ્સને યોગ્ય રીતે હેન્ડલ નહીં કરો, તો તમને આવી સમસ્યાઓનો સામનો કરવો પડી શકે છે.

ઇવેન્ટ હેન્ડલિંગ એટલે ક્લિક્સ, સબમિટ્સ અથવા ફેરફારો જેવી યુઝર એક્શનને કેપ્ચર કરવી અને તેને પ્રતિસાદ આપવો. React SyntheticEvent નામની સિસ્ટમનો ઉપયોગ કરે છે. આ સુનિશ્ચિત કરે છે કે તમારો કોડ Chrome, Safari અને Firefox જેવા તમામ બ્રાઉઝર્સમાં એકસરખી રીતે કામ કરે.

HTML અને React ઇવેન્ટ્સ વચ્ચેના મુખ્ય તફાવતો:

• નેમિંગ (Naming): React માં camelCase નો ઉપયોગ કરો. onclick ને બદલે onClick નો ઉપયોગ કરો.
• હેન્ડલર્સ (Handlers): React માં ફંક્શન રેફરન્સ પાસ કરો. સ્ટ્રિંગ્સને બદલે કરલી બ્રેસીસ {} નો ઉપયોગ કરો.
• પ્રિવેન્શન (Prevention): બ્રાઉઝરના ડિફોલ્ટ વર્તનને રોકવા માટે હંમેશા event.preventDefault() કોલ કરો.

React ઇવેન્ટ્સને કેવી રીતે હેન્ડલ કરે છે:

React દરેક સિંગલ નોડ પર લિસનર્સ (listeners) એટેચ કરતું નથી. તે 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 જેવા મેન્યુઅલ લિસનર્સ ઉમેરો છો, તો ક્લીનઅપ ફંક્શનમાં તેને હંમેશા દૂર કરો.

પરફોર્મન્સ માટે શ્રેષ્ઠ પદ્ધતિઓ (Best practices):

• જો તમારી લિસ્ટ ખૂબ મોટી હોય, તો .map() લૂપની અંદર નવા ફંક્શન બનાવવાનું ટાળો.
• ચાઇલ્ડ કમ્પોનન્ટ્સમાં હેન્ડલર્સ પાસ કરતી વખતે useCallback હૂકનો ઉપયોગ કરો.
• તમારા એપને ફાસ્ટ રાખવા માટે કસ્ટમ ઇવેન્ટ લિસનર્સને ક્લીનઅપ કરો.

ઇવેન્ટ્સમાં માસ્ટરી મેળવવી એ ઇન્ટરેક્ટિવ React એપ્લિકેશન્સ બનાવવા માટેની ચાવી છે.

સ્ત્રોત: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69