React applications are built from components, and every component lives a life. It appears on the screen. It reacts to n

React ਐਪਲੀਕੇਸ਼ਨਾਂ ਕੰਪੋਨੈਂਟਸ ਤੋਂ ਬਣੀਆਂ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਹਰ ਕੰਪੋਨੈਂਟ ਇੱਕ ਜੀਵਨ ਜਿਊਂਦਾ ਹੈ। ਇਹ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਇਹ ਨਵੀਂ ਜਾਣਕਾਰੀ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ। ਅੰਤ ਵਿੱਚ ਇਹ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਸ ਲੈਅ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨ ਦੀ ਕੀਮਤ ਭਾਰੀ ਪੈਂਦੀ ਹੈ। ਮੈਮੋਰੀ ਲੀਕ (Memory leaks) ਹੋਣ ਲੱਗਦੀ ਹੈ। ਰੈਂਡਰ ਪਰਫਾਰਮੈਂਸ (Render performance) ਘਟਣ ਲੱਗਦੀ ਹੈ। ਯੂਜ਼ਰ ਅਜਿਹੇ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹਨ ਜੋ ਹੁਣ ਕੰਮ ਨਹੀਂ ਕਰਦੇ ਕਿਉਂਕਿ ਉਹਨਾਂ ਨਾਲ ਜੁੜਿਆ ਕੰਪੋਨੈਂਟ ਦਸ ਮਿੰਟ ਪਹਿਲਾਂ ਅਨਮਾਊਂਟ (unmounted) ਹੋ ਚੁੱਕਾ ਸੀ, ਪਰ ਈਵੈਂਟ ਲਿਸਨਰ (event listener) ਅਜੇ ਵੀ ਚਾਲੂ ਹੈ। ਕੰਪੋਨੈਂਟ ਲਾਈਫਸਾਈਕਲ (component lifecycle) ਨੂੰ ਸਮਝਣਾ ਕੋਈ ਕਿਤਾਬੀ ਅਭਿਆਸ ਨਹੀਂ ਹੈ। ਇਹ ਅਜਿਹਾ ਸਾਫਟਵੇਅਰ ਲਿਖਣ ਦੀ ਨੀਂਹ ਹੈ ਜੋ ਅਸਲ ਵਰਤੋਂ ਦੌਰਾਨ ਭਰੋਸੇਯੋਗ ਰਹੇ।

ਇੱਕ ਕੰਪੋਨੈਂਟ ਦੇ ਹੋਣ ਨੂੰ ਤਿੰਨ ਪੜਾਵਾਂ ਵਿੱਚ ਸੋਚੋ। ਡਿਵੈਲਪਰ ਅਕਸਰ ਇਹਨਾਂ ਨੂੰ ਜਨਮ, ਵਿਕਾਸ ਅਤੇ ਮੌਤ ਵਜੋਂ ਦਰਸਾਉਂਦੇ ਹਨ। React ਇਹਨਾਂ ਨੂੰ mounting, updating, ਅਤੇ unmounting ਕਹਿੰਦਾ ਹੈ। ਹਰੇਕ ਪੜਾਅ ਦਾ ਇੱਕ ਖਾਸ ਕੰਮ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਹਰੇਕ ਤੁਹਾਨੂੰ ਕੋਡ ਚਲਾਉਣ ਜਾਂ ਉਸਨੂੰ ਸਾਫ਼ (clean up) ਕਰਨ ਲਈ ਇੱਕ ਸਹੀ ਸਮਾਂ ਦਿੰਦਾ ਹੈ।

ਤਿੰਨ ਪੜਾਅ

Mounting ਜਨਮ ਹੈ। ਕੰਪੋਨੈਂਟ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਪਹਿਲੀ ਵਾਰ ਬ੍ਰਾਊਜ਼ਰ DOM ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡਾ ਸੈੱਟਅੱਪ ਵਿੰਡੋ (setup window) ਹੈ। ਜੇਕਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰਿਮੋਟ ਡੇਟਾ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਹ ਉਹ ਸਮਾਂ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸਦੀ ਬੇਨਤੀ ਕਰਦੇ ਹੋ। ਜੇਕਰ ਇਸਨੂੰ props ਤੋਂ ਗਣਨਾ ਕੀਤੇ ਗਏ ਸ਼ੁਰੂਆਤੀ state ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਉਹ ਇੱਥੇ ਕਰਦੇ ਹੋ। ਕਲਾਸ ਕੰਪੋਨੈਂਟ (class component) ਦੇ ਯੁੱਗ ਵਿੱਚ, ਇਹ componentDidMount ਦਾ ਖੇਤਰ ਸੀ। ਆਧੁਨਿਕ ਫੰਕਸ਼ਨਲ ਕੰਪੋਨੈਂਟਸ (functional components) ਦੇ ਨਾਲ, ਤੁਸੀਂ ਇਸਨੂੰ useEffect ਅਤੇ ਇੱਕ ਖਾਲੀ dependency array ਨਾਲ ਸੰਭਾਲਦੇ ਹੋ। ਮੁੱਖ ਗੱਲ ਇਹ ਹੈ ਕਿ ਕੋਡ ਦਾ ਇਹ ਬਲਾਕ ਇੱਕ ਵਾਰ ਚੱਲਦਾ ਹੈ, ਜਿਵੇਂ ਹੀ React ਐਲੀਮੈਂਟ ਨੂੰ ਪੇਜ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਇਹ ਇਸਨੂੰ ਯੂਜ਼ਰ ਪ੍ਰੋਫਾਈਲ ਫੈਚ ਕਰਨ ਜਾਂ localStorage ਤੋਂ ਕੋਈ ਮੁੱਲ ਪੜ੍ਹਨ ਵਰਗੇ ਇੱਕ ਵਾਰ ਦੇ ਸੈੱਟਅੱਪ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ।

Updating ਵਿਕਾਸ ਹੈ। ਇੱਕ ਮਾਊਂਟਡ (mounted) ਕੰਪੋਨੈਂਟ ਇੱਕੋ ਜਗ੍ਹਾ ਨਹੀਂ ਬੈਠਦਾ। Parent ਤੋਂ props ਆਉਂਦੇ ਹਨ। ਯੂਜ਼ਰ ਦੀ ਇੰਟਰੈਕਸ਼ਨ (interaction) ਤੋਂ state ਬਦਲਦੀ ਹੈ। Parent ਖੁਦ re-render ਹੁੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ child ਨੂੰ ਵੀ ਅਨੁਸਾਰਨ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਫਿਰ React ਕੰਪੋਨੈਂਟ ਨੂੰ re-render ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ UI ਤੁਹਾਡੇ ਡੇਟਾ ਦੇ ਨਾਲ ਸਿੰਕ (sync) ਰਹੇ। ਇਹ ਪੜਾਅ ਕੰਪੋਨੈਂਟ ਦੇ ਜੀਵਨ ਦੌਰਾਨ ਕਈ ਵਾਰ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਈ dependency ਬਦਲਦੀ ਹੈ, ਤੁਹਾਡੇ effects ਦੁਬਾਰਾ ਚੱਲਦੇ ਹਨ, ਅਤੇ ਕੰਪੋਨੈਂਟ DOM ਵਿੱਚ ਨਵਾਂ ਆਊਟਪੁੱਟ ਭੇਜਦਾ ਹੈ। ਕਿਉਂਕਿ ਇਹ ਪੜਾਅ ਬਹੁਤ ਵਾਰ-ਵਾਰ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ, ਇਸ ਲਈ ਇੱਥੇ ਹੀ ਜ਼ਿਆਦਾਤਰ ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ। ਇੱਥੇ ਹੋਣ ਵਾਲਾ ਬੇਲੋੜਾ ਕੰਮ ਤੇਜ਼ੀ ਨਾਲ ਵਧਦਾ ਜਾਂਦਾ ਹੈ।

Unmounting ਮੌਤ ਹੈ। ਕੰਪੋਨੈਂਟ ਸਕ੍ਰੀਨ ਤੋਂ ਹਟ ਜਾਂਦਾ ਹੈ, ਸ਼ਾਇਦ ਇਸ ਲਈ ਕਿਉਂਕਿ ਯੂਜ਼ਰ ਕਿਸੇ ਦੂਜੇ ਪੇਜ 'ਤੇ ਚਲਾ ਗਿਆ ਹੈ ਜਾਂ ਕੋਈ conditional render ਬੰਦ ਹੋ ਗਿਆ ਹੈ। ਇਸ ਸਮੇਂ 'ਤੇ, ਕੰਪੋਨੈਂਟ ਨੂੰ ਖਤਮ ਕਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਬਾਹਰੀ ਦੁਨੀਆ ਨੂੰ ਹਮੇਸ਼ਾ ਇਸਦਾ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ। ਟਾਈਮਰ ਚੱਲਦੇ ਰਹਿੰਦੇ ਹਨ। WebSockets ਸੁਣਦੇ ਰਹਿੰਦੇ ਹਨ। window ਆਬਜੈਕਟ 'ਤੇ ਈਵੈਂਟ ਲਿਸਨਰ (event listeners) ਜੁੜੇ ਰਹਿੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਾਫ਼ ਨਹੀਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਮਰੇ ਹੋਏ ਕੰਪੋਨੈਂਟਸ ਦੇ ਰੈਫਰੈਂਸ (references) ਰੱਖਦੇ ਹਨ ਅਤੇ ਮੈਮੋਰੀ ਲੀਕ ਕਰਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰ ਭਟਕਦੀਆਂ ਆਤਮਾਵਾਂ (ghosts) 'ਤੇ ਸਾਈਕਲ ਬਰਬਾਦ ਕਰਦਾ ਹੈ। React ਤੁਹਾਨੂੰ ਇੱਕ cleanup function ਇਸ ਲਈ ਦਿੰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਕੰਪੋਨੈਂਟ ਦੇ ਪੱਕੇ ਤੌਰ 'ਤੇ ਗਾਇਬ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ intervals ਨੂੰ ਰੋਕ ਸਕੋ, ਕਨੈਕਸ਼ਨਾਂ ਨੂੰ ਬੰਦ ਕਰ ਸਕੋ, ਅਤੇ ਲਿਸਨਰਾਂ ਨੂੰ ਹਟਾ ਸਕੋ।

ਕਲਾਸ ਮੈਥਡਸ ਤੋਂ Hooks ਤੱਕ

ਸਾਲਾਂ ਤੋਂ, React ਇੰਜੀਨੀਅਰਾਂ ਨੇ ਕਲਾਸ ਕੰਪੋਨੈਂਟਸ ਰਾਹੀਂ ਇਹਨਾਂ ਪੜਾਵਾਂ ਨੂੰ ਸੰਭਾਲਿਆ। ਲੌਜਿਕ (Logic) ਵੱਖ-ਵੱਖ ਮੈਥਡਸ ਵਿੱਚ ਵੰਡਿਆ ਹੋਇਆ ਸੀ। ਤੁਸੀਂ componentDidMount ਦੇ ਅੰਦਰ ਡੇਟਾ ਫੈਚ ਕਰਦੇ ਸੀ, componentDidUpdate ਦੇ ਅੰਦਰ prop ਤਬਦੀਲੀਆਂ ਦਾ ਜਵਾਬ ਦਿੰਦੇ ਸੀ, ਅਤੇ componentWillUnmount ਦੇ ਅੰਦਰ ਸਫਾਈ ਕਰਦੇ ਸੀ। ਸਮੱਸਿਆ ਇਹ ਸੀ ਕਿ ਸਬੰਧਤ ਲੌਜਿਕ ਖਿੰਡਿਆ ਹੋਇਆ ਸੀ। ਇੱਕ ਸਿੰਗਲ ਫੀਚਰ, ਜਿਵੇਂ ਕਿ ਲਾਈਵ ਚੈਟ ਕਨੈਕਸ਼ਨ, ਨੂੰ ਸਿਰਫ ਕਨੈਕਟ ਕਰਨ, ਥ੍ਰੈਡ ਤਬਦੀਲੀਆਂ ਦੀ ਜਾਂਚ ਕਰਨ ਅਤੇ ਡਿਸਕਨੈਕਟ ਕਰਨ ਲਈ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਲਾਈਫਸਾਈਕਲ ਮੈਥਡਸ ਵਿੱਚ ਕੋਡ ਦੀ ਲੋੜ ਸੀ।

Hooks ਨੇ ਇਹ ਬਦਲ ਦਿੱਤਾ। ਫੰਕਸ਼ਨਲ ਕੰਪੋਨੈਂਟਸ ਵਿੱਚ useEffect ਹੁੱਕ ਤੁਹਾਨੂੰ ਲਾਈਫਸਾਈਕਲ ਪੜਾਅ ਦੀ ਬਜਾਏ ਉਦੇਸ਼ ਅਨੁਸਾਰ ਲੌਜਿਕ ਨੂੰ ਸਮੂਹਬੱਧ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਫਿਰ ਵੀ, ਜੇਕਰ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਕਿੱਥੇ ਦੇਖਣਾ ਹੈ, ਤਾਂ ਮਾਨਸਿਕ ਮਾਡਲ (mental model) ਸਾਫ਼ ਤੌਰ 'ਤੇ ਮੈਪ ਹੁੰਦਾ ਹੈ।

Mounting ਨੂੰ ਸੰਭਾਲਣ ਲਈ, useEffect(() => { ... }, []) ਲਿਖੋ। ਖਾਲੀ dependency array React ਨੂੰ ਦ