React Event Handling Guide

ਕੀ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ ਤੁਹਾਡਾ ਪੂਰਾ ਵੈੱਬ ਪੇਜ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ? ਕੀ ਟਾਈਪ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡਾ ਇਨਪੁਟ ਬਾਕਸ ਸਟੇਟ (state) ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਵਿੱਚ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ? ਜੇਕਰ ਤੁਸੀਂ React ਵਿੱਚ ਈਵੈਂਟਸ (events) ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਹੈਂਡਲ ਨਹੀਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਹਨਾਂ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ।

Event handling ਦਾ ਮਤਲਬ ਹੈ ਯੂਜ਼ਰ ਦੇ ਐਕਸ਼ਨਾਂ ਜਿਵੇਂ ਕਿ ਕਲਿੱਕ (clicks), ਸਬਮਿਟ (submits), ਜਾਂ ਚੇਂਜਸ (changes) ਨੂੰ ਕੈਪਚਰ ਕਰਨਾ ਅਤੇ ਉਹਨਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਦੇਣਾ। React ਇੱਕ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ SyntheticEvent ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੋਡ Chrome, Safari, ਅਤੇ Firefox ਵਰਗੇ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੱਕੋ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰੇ।

HTML ਅਤੇ React events ਵਿਚਕਾਰ ਮੁੱਖ ਅੰਤਰ:

  • Naming: React ਵਿੱਚ camelCase ਦੀ ਵਰਤੋਂ ਕਰੋ। onclick ਦੀ ਬਜਾਏ onClick ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • Handlers: React ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਰੈਫਰੈਂਸ (function reference) ਪਾਸ ਕਰੋ। ਸਟ੍ਰਿੰਗਸ (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)} ਨਾ ਲਿਖੋ ਕਿਉਂਕਿ ਇਹ ਰੈਂਡਰ (render) ਦੌਰਾਨ ਤੁਰੰਤ ਚੱਲ ਜਾਂਦਾ ਹੈ।

ਇਹਨਾਂ ਗਲਤੀਆਂ ਤੋਂ ਬਚੋ:

  • Infinite Loops: onClick ਐਟਰੀਬਿਊਟ ਵਿੱਚ ਕਦੇ ਵੀ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਨਾ ਕਰੋ। ਇਹ ਰੈਂਡਰ ਦੌਰਾਨ ਸਟੇਟ ਅਪਡੇਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਦੁਬਾਰਾ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ।
  • Undefined Events: ਜੇਕਰ ਤੁਹਾਨੂੰ preventDefault() ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਹਮੇਸ਼ਾ ਆਪਣੀ ਫੰਕਸ਼ਨ ਡੈਫੀਨੇਸ਼ਨ ਵਿੱਚ event ਪੈਰਾਮੀਟਰ ਸ਼ਾਮਲ ਕਰੋ।
  • Memory Leaks: ਜੇਕਰ ਤੁਸੀਂ useEffect ਹੁੱਕ ਵਿੱਚ window.addEventListener ਵਰਗੇ ਮੈਨੂਅਲ ਲਿਸਨਰ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਹਮੇਸ਼ਾ ਕਲੀਨਅੱਪ (cleanup) ਫੰਕਸ਼ਨ ਵਿੱਚ ਉਹਨਾਂ ਨੂੰ ਹਟਾ ਦਿਓ।

ਪਰਫਾਰਮੈਂਸ ਲਈ ਵਧੀਆ ਤਰੀਕੇ (Best practices):

  • ਜੇਕਰ ਤੁਹਾਡੀ ਲਿਸਟ ਬਹੁਤ ਵੱਡੀ ਹੈ, ਤਾਂ .map() ਲੂਪ ਦੇ ਅੰਦਰ ਨਵੇਂ ਫੰਕਸ਼ਨ ਬਣਾਉਣ ਤੋਂ ਬਚੋ।
  • ਚਾਈਲਡ ਕੰਪੋਨੈਂਟਸ (child components) ਨੂੰ ਹੈਂਡਲਰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ useCallback ਹੁੱਕ ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • ਆਪਣੇ ਐਪ ਨੂੰ ਤੇਜ਼ ਰੱਖਣ ਲਈ ਕਸਟਮ ਈਵੈਂਟ ਲਿਸਨਰਾਂ ਨੂੰ ਕਲੀਨਅੱਪ ਕਰੋ।

ਈਵੈਂਟਸ ਵਿੱਚ ਮਾਹਰ ਹੋਣਾ ਇੰਟਰਐਕਟਿਵ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਬਣਾਉਣ ਦੀ ਕੁੰਜੀ ਹੈ।

ਸਰੋਤ: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69