React ਚਾਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ components ਅਨੁਮਾਨਯੋਗ ਹੋਣ। ਇਸਨੂੰ ਇੱਕੋ ਜਿਹਾ state ਅਤੇ props ਦਿਓ, ਅਤੇ ਇਸਨੂੰ ਹਰ ਵਾਰ ਇੱਕੋ ਜਿਹਾ UI ਦਿਖਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਪਰ ਜ਼ਿਆਦਾਤਰ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਉਸ ਬੁਲਬੁਲੇ ਦੇ ਅੰਦਰ ਨਹੀਂ ਰਹਿ ਸਕਦੀਆਂ। ਉਹਨਾਂ ਨੂੰ ਬਾਹਰ ਤੱਕ ਪਹੁੰਚਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਡੈਸ਼ਬੋਰਡ ਨੂੰ ਸਰਵਰ ਤੋਂ ਤਾਜ਼ਾ ਅੰਕੜਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਕ ਚੈਟ ਵਿਜੇਟ ਨੂੰ ਸੁਨੇਹਿਆਂ ਦੀ ਉਡੀਕ ਕਰਨੀ ਪੈਂਦੀ ਹੈ। ਇੱਕ ਟਾਈਮਰ ਨੂੰ ਚੱਲਣਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਕਾਰਜ side effects ਹਨ, ਅਤੇ ਉਹ React ਦੇ render cycle ਤੋਂ ਬਾਹਰ ਹੁੰਦੇ ਹਨ। useEffect hook ਉਹ ਜਗ੍ਹਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਉਹ ਗੁੰਝਲਦਾਰ ਅਤੇ ਅਨੁਮਾਨ ਅਣਯੋਗ ਕੰਮ ਰੱਖਦੇ ਹੋ ਤਾਂ ਜੋ ਤੁਹਾਡਾ component ਖੁਦ ਭਰੋਸੇਮੰਦ ਰਹੇ।

Side Effects: useEffect ਦੇ ਅੰਦਰ ਕੀ ਆਉਂਦਾ ਹੈ

ਇੱਕ side effect ਉਹ ਕੁਝ ਵੀ ਹੈ ਜੋ JSX ਵਾਪਸ ਕਰਨ ਤੋਂ ਇਲਾਵਾ ਦੁਨੀਆ ਦੇ ਹੋਰ ਹਿੱਸਿਆਂ ਨੂੰ ਛੂਹਦਾ ਹੈ। React ਦਾ render phase ਸ਼ੁੱਧ (pure) ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਡਾਟਾ fetch ਕਰਨਾ, global variables ਵਿੱਚ ਲਿਖਣਾ, ਜਾਂ DOM ਨਾਲ listeners ਜੋੜਨਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ pure territory ਤੋਂ ਬਾਹਰ ਨਿਕਲ ਜਾਂਦੇ ਹੋ।

ਆਮ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

  • API ਤੋਂ ਡਾਟਾ fetch ਕਰਨਾ
  • Timers ਜਾਂ intervals ਸੈੱਟ ਕਰਨਾ
  • window ਜਾਂ document ਵਿੱਚ event listeners ਜੋੜਨਾ
  • Browser tab title ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
  • WebSockets ਨਾਲ ਕਨੈਕਟ ਕਰਨਾ

ਇਹਨਾਂ ਕਾਰਜਾਂ ਵਿੱਚ ਇੱਕ ਗੁਣ ਸਾਂਝਾ ਹੈ: ਉਹ ਤੁਹਾਡੇ component ਦੇ return statement ਜਾਂ ਮੁੱਖ render logic ਦੇ ਅੰਦਰ ਨਹੀਂ ਆਉਂਦੇ। Render body ਦੇ ਅੰਦਰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ setInterval ਵਰਗੀ browser API ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਨਾਲ ਇਹ ਹਰ render 'ਤੇ ਚੱਲੇਗੀ, ਜਿਸ ਨਾਲ ਡੁਪਲੀਕੇਟ timers ਬਣ ਜਾਣਗੇ ਅਤੇ ਵਿਵਹਾਰ ਉਲਝਣ ਵਾਲਾ ਹੋ ਜਾਵੇਗਾ। useEffect ਬਿਲਕੁਲ ਇਸੇ ਕੰਮ ਨੂੰ ਅਲੱਗ ਕਰਨ ਅਤੇ ਇਸਨੂੰ ਸਹੀ ਸਮੇਂ 'ਤੇ ਚਲਾਉਣ ਲਈ ਮੌਜੂਦ ਹੈ।

Dependency Array ਸਮੇਂ (Timing) ਨੂੰ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ

useEffect ਦਾ ਦੂਜਾ argument dependency array ਹੈ, ਅਤੇ ਇਹ class components ਤੋਂ ਆਉਣ ਵਾਲੇ developers ਲਈ ਉਲਝਣ ਦਾ ਸਭ ਤੋਂ ਵੱਡਾ ਕਾਰਨ ਹੈ। ਇਸਨੂੰ ਉਹਨਾਂ variables ਦੇ ਸਮੂਹ ਵਜੋਂ ਸਮਝੋ ਜਿਨ੍ਹਾਂ 'ਤੇ React ਨਜ਼ਰ ਰੱਖਦਾ ਹੈ ਤਾਂ ਜੋ ਇਹ ਫੈਸਲਾ ਕੀਤਾ ਜਾ ਸਕੇ ਕਿ ਮੌਜੂਦਾ render ਤੋਂ ਬਾਅਦ ਤੁਹਾਡੇ effect ਨੂੰ ਛੱਡਣਾ ਹੈ ਜਾਂ ਚਲਾਉਣਾ ਹੈ।

ਇੱਥੇ ਤਿੰਨ ਪੈਟਰਨ ਹਨ ਜੋ ਤੁਸੀਂ ਵਾਰ-ਵਾਰ ਵਰਤੋਂਗੇ।

ਕੋਈ dependency array ਨਹੀਂ। ਜੇਕਰ ਤੁਸੀਂ array ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੰਦੇ ਹੋ, ਤਾਂ React ਮੰਨ ਲੈਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ effect ਪਹਿਲੇ render ਸਮੇਤ ਹਰ ਇੱਕ render ਤੋਂ ਬਾਅਦ ਚੱਲੇ। ਇਹ ਬਹੁਤ ਘੱਟ ਹੀ ਲੋੜੀਂਦਾ ਹੁੰਦਾ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ effect ਕੋਈ network request ਜਾਂ ਭਾਰੀ DOM operation ਕਰਦਾ ਹੈ, ਤਾਂ ਹਰ keystroke ਜਾਂ state ਦੇ ਬਦਲਾਅ 'ਤੇ ਇਸਨੂੰ ਚਲਾਉਣ ਨਾਲ performance ਖ਼ਰਾਬ ਹੋ ਜਾਵੇਗੀ। ਇਸ ਪੈਟਰਨ ਦੀ ਵਰਤੋਂ ਉਦੋਂ ਹੀ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸੱਚਮੁੱਚ ਕਿਸੇ ਚੀਜ਼ ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਣ ਦੀ ਲੋੜ ਹੋਵੇ ਕਿਉਂਕਿ ਕੋਈ ਵੀ prop ਜਾਂ state ਬਦਲ ਸਕਦੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਹ ਨਹੀਂ ਦੱਸ ਸਕਦੇ ਕਿ ਕਿਹੜੀ ਬਦਲੀ ਹੈ।

ਇੱਕ ਖਾਲੀ array []। ਇਹ React ਨੂੰ component ਦੇ mount ਹੋਣ ਅਤੇ DOM ਤਿਆਰ ਹੋਣ ਤੋਂ ਤੁਰੰਤ ਬਾਅਦ ਇੱਕ ਵਾਰ effect ਚਲਾਉਣ ਲਈ ਕਹਿੰਦਾ ਹੈ। ਇਹ ਸ਼ੁਰੂਆਤੀ data fetches ਲਈ ਸਹੀ ਜਗ੍ਹਾ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ, ਜੇਕਰ ਤੁਹਾਡਾ component user profile data load ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਉਹ request ਉਦੋਂ ਹੀ ਇੱਕ ਵਾਰ ਚੱਲੇ ਜਦੋਂ profile page ਦਿਖਾਈ ਦੇਵੇ, ਨਾ ਕਿ ਹਰ ਵਾਰ ਜਦੋਂ user ਪੇਜ ਦੇ ਹੇਠਾਂ ਕਿਸੇ form ਨਾਲ ਗੱਲਬਾਤ ਕਰਦਾ ਹੈ।

ਵਿਸ਼ੇਸ਼ variables ਵਾਲਾ ਇੱਕ array [count]। ਇਹ ਇੱਕ ਸਟੀਕ (precision) ਟੂਲ ਹੈ। React ਇਹਨਾਂ dependencies ਦੇ ਮੌਜੂਦਾ ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਪਿਛਲੇ render ਦੌਰਾਨ ਉਹਨਾਂ ਦੇ ਮੁੱਲਾਂ ਨਾਲ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਉਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਬਦਲਦਾ ਹੈ, ਤਾਂ effect ਚੱਲਦਾ ਹੈ। ਜੇਕਰ ਸੂਚੀ ਵਿੱਚ ਕੁਝ ਵੀ ਨਹੀਂ ਬਦਲਦਾ, ਤਾਂ React effect ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿੰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਸੀਂ browser tab title ਨੂੰ ਇੱਕ state variable ਨਾਲ sync ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਉਸ variable ਨੂੰ dependency array ਵਿੱਚ ਰੱਖੋਗੇ। ਫਿਰ React title ਨੂੰ ਉਦੋਂ ਹੀ ਅਪਡੇਟ ਕਰੇਗਾ ਜਦੋਂ ਉਹ ਮੁੱਲ ਬਦਲੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਬਾਹਰ ਰੱਖਦੇ ਹੋ, ਤਾਂ title ਪੁਰਾਣਾ (stale) ਹੀ ਰਹੇਗਾ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਅਣਸੰਬੰਧਿਤ state variables ਪਾ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਬਦਲਾਅਾਂ ਲਈ title ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਵਿੱਚ ਸਮਾਂ ਬਰਬਾਦ ਕਰਦੇ ਹੋ ਜਿਨ੍ਹਾਂ ਦਾ ਕੋਈ ਮਤਲਬ ਨਹੀਂ ਹੈ।

Cleanup ਲਾਜ਼ਮੀ ਹੈ

ਕੁਝ effects ਆਪਣੇ ਪਿੱਛੇ ਨਿਸ਼ਾਨ ਛੱਡ ਜਾਂਦੇ ਹਨ। ਇੱਕ timer ਗਿਣਤੀ ਜਾਰੀ ਰੱਖਦਾ ਹੈ। ਇੱਕ event listener ਚੱਲਦਾ ਰਹਿੰਦਾ ਹੈ। ਇੱਕ WebSocket ਖੁੱਲ੍ਹਾ ਰਹਿੰਦਾ ਹੈ। ਜਦੋਂ ਤੁਹਾਡਾ component unmount ਹੁੰਦਾ ਹੈ, ਜਾਂ ਉਦੋਂ ਵੀ ਜਦੋਂ ਕੋਈ effect ਦੁਬਾਰਾ ਚੱਲਦਾ ਹੈ ਕਿਉਂਕਿ ਉਸਦੀਆਂ dependencies ਬਦਲ ਗਈਆਂ ਹਨ, React ਪਿਛਲੇ effect ਦੇ ਬਚੇ ਹੋਏ ਹਿੱਸੇ ਨੂੰ ਆਪਣੇ ਆਪ ਸਾਫ਼ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਤੁਹਾਡਾ ਕੰਮ ਹੈ।

ਤੁਸੀਂ useEffect ਦੇ ਅੰਦਰੋਂ ਇੱਕ function return ਕਰਕੇ cleanup function ਬਣਾਉਂਦੇ ਹੋ। React ਅਗਲੇ effect ਨੂੰ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਅਤੇ ਇੱਕ ਵਾਰ ਫਿਰ ਜਦੋਂ component ਸਕ੍ਰੀਨ ਤੋਂ ਹਟ ਜਾਂਦਾ ਹੈ, ਇਸ cleanup ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ।

ਤੁਹਾਨੂੰ cleanup ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ:

  • clearInterval ਜਾਂ clearTimeout ਨਾਲ intervals ਜਾਂ timeouts ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ
  • window, document, ਜਾਂ ਬਾਹਰੀ nodes ਵਿੱਚ ਜੋੜੇ ਗਏ event listeners ਨੂੰ ਹਟਾਉਣ ਲਈ
  • Data streams ਜਾਂ services ਤੋਂ unsubscribe ਕਰਨ ਲਈ

ਇਸ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰੋ, ਅਤੇ ਤੁਹਾਨੂੰ memory leaks ਮਿਲਣਗੇ। ਇੱਕ component mount ਹੁੰਦਾ ਹੈ, ਇੱਕ scroll listener ਜੋੜਦਾ ਹੈ, unmount ਹੁੰਦਾ ਹੈ, ਅਤੇ listener ਉੱਥੇ ਹੀ ਰਹਿੰਦਾ ਹੈ। Browser callback ਅਤੇ ਉਹ DOM nodes ਜਿਨ੍ਹਾਂ ਦਾ ਇਹ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਫੜ ਕੇ ਰੱਖਦਾ ਹੈ। ਸਮੇਂ ਦੇ ਨਾਲ, ਖਾਸ ਕਰਕੇ ਭਾਰੀ navigation ਵਾਲੀਆਂ single-page applications ਵਿੱਚ, ਇਹ 'ghosts' ਇਕੱਠੇ ਹੋ ਜਾਂਦੇ ਹਨ ਅਤੇ tab ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦੇ ਹਨ। ਇਸਦਾ ਹੱਲ ਆਮ ਤੌਰ 'ਤੇ ਸਿਰਫ਼ ਕੁਝ ਲਾਈਨਾਂ ਹੈ: ਇੱਕ ਅਜਿਹਾ function return ਕਰੋ ਜੋ ਉਸ ਚੀਜ਼ ਨੂੰ ਹਟਾ ਦੇਵੇ ਜੋ ਤੁਸੀਂ ਜੋੜੀ ਸੀ।

ਆਮ ਗਲਤੀਆਂ ਜੋ Production ਵਿੱਚ ਚਲੀਆਂ ਜਾਂਦੀਆਂ ਹਨ

ਤਜਰਬੇਕਾਰ ਡਿਵੈਲਪਰ ਵੀ useEffect ਦੀ ਵਰਤੋਂ ਉਦੋਂ ਕਰਨ ਲੱਗ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਕੋਈ ਸਰਲ ਵਿਕਲਪ ਮੌਜੂਦ ਹੁੰਦਾ ਹੈ। ਇੱਥੇ ਤਿੰਨ ਅਜਿਹੇ ਪੈਟਰਨ ਹਨ ਜੋ ਕੋਡ ਰਿਵਿਊ ਦੌਰਾਨ ਚੇਤਾਵਨੀ ਦੇ ਸੰਕੇਤ (red flag) ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ।

Infinite loops. useEffect ਦੇ ਅੰਦਰ ਕਦੇ ਵੀ ਕਿਸੇ state variable ਨੂੰ ਅਪਡੇਟ ਨਾ ਕਰੋ ਜੇਕਰ ਉਹੀ variable ਤੁਹਾਡੇ dependency array ਵਿੱਚ ਹੈ, ਜਦੋਂ ਤੱਕ ਤੁਹਾਡੇ ਕੋਲ ਕੋਈ ਅਜਿਹੀ gate condition ਨਾ ਹੋਵੇ ਜੋ ਇਸ ਚੱਕਰ ਨੂੰ ਤੋੜ ਸਕੇ। ਜੇਕਰ ਤੁਸੀਂ count ਨੂੰ ਪੜ੍ਹਦੇ ਹੋ, ਉਸਨੂੰ ਵਧਾਉਂਦੇ ਹੋ, ਅਤੇ count ਨੂੰ ਇੱਕ dependency ਵਜੋਂ ਲਿਸਟ ਕਰਦੇ ਹੋ, ਤਾਂ React ਬਦਲਾਅ ਨੂੰ ਦੇਖਦਾ ਹੈ, re-render ਕਰਦਾ ਹੈ, effect ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਂਦਾ ਹੈ, ਫਿਰ ਤੋਂ ਵਧਾਉਂਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲਾਕ ਕਰ ਦਿੰਦਾ ਹੈ।

Unnecessary effects. ਮੌਜੂਦਾ props ਜਾਂ state ਤੋਂ ਕਿਸੇ value ਦੀ ਗਣਨਾ ਕਰਨ ਲਈ useEffect ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ render ਦੌਰਾਨ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਕੱਢ (derive) ਸਕਦੇ ਹੋ, ਤਾਂ ਬੱਸ ਉਹੀ ਕਰੋ। Derived values ਕੰਪੋਨੈਂਟ ਬਾਡੀ ਵਿੱਚ ਜਾਂ useMemo ਨਾਲ ਇੱਕ memoized calculation ਵਿੱਚ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਇੱਕ effect ਵਿੱਚ ਲੈ ਕੇ ਜਾਣ ਨਾਲ ਤੁਹਾਡਾ logic ਬਿਨਾਂ ਕਿਸੇ ਫਾਇਦੇ ਦੇ render ਅਤੇ effect phases ਵਿੱਚ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਕੋਡ ਨੂੰ ਸਮਝਣਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ।

The wrong tool for user actions. `use