ਜਦੋਂ React 'Re-render' ਕਹਿੰਦਾ ਹੈ, ਤਾਂ ਇਸਦਾ ਮਤਲਬ ਤਿੰਨ ਚੀਜ਼ਾਂ ਹੁੰਦਾ ਹੈ
ਜਦੋਂ ਤੁਸੀਂ setState ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ React ਸਿਰਫ਼ DOM ਨੂੰ ਅਪਡੇਟ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਇੱਕ ਲੜੀ ਵਿੱਚ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਪੜਾਅ (phases) ਚਲਾਉਂਦਾ ਹੈ। ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰ ਇਹਨਾਂ ਪੜਾਵਾਂ ਵਿੱਚ ਉਲਝ ਜਾਂਦੇ ਹਨ। ਅੰਤਰ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਸੁਲਝਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
ਤਿੰਨ ਪੜਾਅ:
• Render: React ਤੁਹਾਡੇ component function ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। • Reconcile: React ਨਵੇਂ ਆਉਟਪੁੱਟ ਦੀ ਪੁਰਾਣੇ ਨਾਲ ਤੁਲਨਾ ਕਰਦਾ ਹੈ। • Commit: React DOM ਵਿੱਚ ਬਦਲਾਅ ਲਾਗੂ ਕਰਦਾ ਹੈ।
- The Render Phase
React ਤੁਹਾਡੇ function ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ। ਇਹ ਮੌਜੂਦਾ props ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। function JSX ਰਿਟਰਨ ਕਰਦਾ ਹੈ। ਇਹ JSX ਸਿਰਫ਼ JavaScript objects ਦੀ ਇੱਕ ਸੂਚੀ ਹੈ। ਲੋਕ ਇਸਨੂੰ virtual DOM ਕਹਿੰਦੇ ਹਨ। ਇਹ ਅਸਲੀ DOM ਨਹੀਂ ਹੈ। ਇਹ ਇਸ ਗੱਲ ਦਾ ਵਰਣਨ ਹੈ ਕਿ UI ਕਿਹੋ ਜਿਹਾ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ। ਅਜੇ ਸਕ੍ਰੀਨ 'ਤੇ ਕੁਝ ਵੀ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ। ਇਹ ਪੜਾਅ ਪੂਰੀ ਤਰ੍ਹਾਂ ਗਣਿਤ (math) ਅਤੇ ਤਰਕ (logic) 'ਤੇ ਅਧਾਰਤ ਹੈ।
- The Reconcile Phase
React ਪੁਰਾਣੀ tree ਅਤੇ ਨਵੀਂ tree ਨੂੰ ਰੱਖਦਾ ਹੈ। ਇਹ ਉਹਨਾਂ ਵਿਚਕਾਰ ਅੰਤਰ ਲੱਭਦਾ ਹੈ। ਜੇਕਰ element type ਬਦਲਦਾ ਹੈ, ਤਾਂ React ਪੂਰੀ tree ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਜੇਕਰ ਸਿਰਫ਼ props ਬਦਲਦੇ ਹਨ, ਤਾਂ React ਉਹਨਾਂ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ। ਇੱਥੇ keys ਮਹੱਤਵਪੂਰਨ ਹੁੰਦੀਆਂ ਹਨ। Keys React ਨੂੰ ਸਥਾਨ (position) ਦੀ ਬਜਾਏ ਪਛਾਣ (identity) ਦੁਆਰਾ ਸੂਚੀ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਮਿਲਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਪੜਾਅ DOM ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਘੱਟੋ-ਘੱਟ ਕਦਮਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਬਣਾਉਂਦਾ ਹੈ।
- The Commit Phase
React ਬਦਲਾਅ ਦੀ ਸੂਚੀ ਲੈਂਦਾ ਹੈ ਅਤੇ ਅਸਲੀ DOM ਨੂੰ ਛੂਹਦਾ ਹੈ। ਇਹ ਨਵੇਂ nodes ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਪੁਰਾਣੇ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਉਹ ਸਮਾਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਕ੍ਰੀਨ 'ਤੇ ਬਦਲਾਅ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਇਸ ਤੋਂ ਬਾਅਦ, ਬ੍ਰਾਊਜ਼ਰ ਸਕ੍ਰੀਨ ਨੂੰ paint ਕਰਦਾ ਹੈ। ਫਿਰ, useEffect ਚੱਲਦਾ ਹੈ।
Common Misconceptions:
• Re-render ਹਮੇਸ਼ਾ DOM ਨੂੰ ਨਹੀਂ ਬਦਲਦਾ। ਜੇਕਰ ਆਉਟਪੁੱਟ ਉਹੀ ਹੈ, ਤਾਂ React commit phase ਵਿੱਚ ਕੁਝ ਨਹੀਂ ਕਰਦਾ। • React.memo function call ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ। ਇਹ DOM update ਨੂੰ ਨਹੀਂ ਛੱਡਦਾ। • Props re-renders ਨੂੰ trigger ਨਹੀਂ ਕਰਦੇ। ਇੱਕ parent ਦਾ re-render ਹੋਣਾ child ਨੂੰ trigger ਕਰਦਾ ਹੈ। Prop ਵਿੱਚ ਬਦਲਾਅ ਸਿਰਫ਼ ਇੱਕ ਨਤੀਜਾ ਹੈ।
How to Fix Performance:
ਜੇਕਰ ਤੁਹਾਡਾ function ਹੌਲੀ ਹੈ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ Render ਦੀ ਸਮੱਸਿਆ ਹੈ। ਭਾਰੀ ਕੰਮ ਨੂੰ function ਤੋਂ ਬਾਹਰ ਕੱਢੋ ਜਾਂ memoization ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਜੇਕਰ React ਵੱਡੀਆਂ lists ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ Reconcile ਦੀ ਸਮੱਸਿਆ ਹੈ। ਆਪਣੀਆਂ keys ਦੀ ਜਾਂਚ ਕਰੋ।
ਜੇਕਰ DOM ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ Commit ਦੀ ਸਮੱਸਿਆ ਹੈ। Virtualization ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਾਂ ਆਪਣੀ structure ਬਦਲੋ।
React 19 ਅਤੇ React Compiler ਹੁਣ ਤੁਹਾਡੇ ਲਈ ਇਸ ਕੰਮ ਦਾ ਬਹੁਤ ਹਿੱਸਾ ਸੰਭਾਲ ਲੈਂਦੇ ਹਨ। ਪਰ ਇਹਨਾਂ ਪੜਾਵਾਂ ਨੂੰ ਜਾਣਨਾ ਤੁਹਾਨੂੰ ਬਿਹਤਰ debug ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।