React ਸਿੱਖਣ ਦਾ 5ਵਾਂ ਦਿਨ: Batching ਅਤੇ Functional Updates
ਮੈਨੂੰ ਲੱਗਦਾ ਸੀ ਕਿ state setter ਨੂੰ ਕਈ ਵਾਰ ਕਾਲ ਕਰਨ ਨਾਲ ਕਈ ਵਾਰ renders ਹੁੰਦੇ ਹਨ।
ਮੈਂ ਗਲਤ ਸੀ।
React ਇਸ ਤੋਂ ਵੀ ਸਮਝਦਾਰ ਹੈ। ਇਹ Automatic Batching ਨਾਮ ਦੀ ਇੱਕ ਪ੍ਰਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਹਰ ਇੱਕ update ਤੋਂ ਬਾਅਦ render ਕਰਨ ਦੀ ਬਜਾਏ, React ਉਹਨਾਂ ਨੂੰ ਇਕੱਠਾ ਕਰ ਦਿੰਦਾ ਹੈ। ਇਹ ਸਾਰੇ updates ਨੂੰ ਇਕੱਠਾ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ render ਕਰਦਾ ਹੈ। ਇਸ ਨਾਲ performance ਬਚਦੀ ਹੈ।
ਅੱਜ ਮੈਂ ਜੋ ਸਿੱਖਿਆ ਹੈ ਉਹ ਇੱਥੇ ਹੈ।
The Batching Process ਜਦੋਂ ਤੁਸੀਂ ਕਈ state functions ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ React ਇਸ ਫਲੋਅ (flow) ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:
- ਕਈ state updates ਹੁੰਦੇ ਹਨ।
- React ਉਹਨਾਂ ਨੂੰ ਇਕੱਠਾ (batch) ਕਰ ਦਿੰਦਾ ਹੈ।
- React ਇੱਕ ਵਾਰ render ਕਰਦਾ ਹੈ।
- React UI ਵਿੱਚ ਬਦਲਾਅ ਲਾਗੂ (commit) ਕਰ ਦਿੰਦਾ ਹੈ।
The Problem with Standard Updates
ਮੈਂ ਇਹ ਕੋਡ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
ਮੈਨੂੰ ਉਮੀਦ ਸੀ ਕਿ count 0 ਤੋਂ 3 ਤੱਕ ਜਾਵੇਗਾ। ਪਰ ਇਹ 0 ਤੋਂ 1 ਤੱਕ ਹੀ ਗਿਆ।
ਅਜਿਹਾ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ setCount(count + 1) ਦਾ ਮਤਲਬ "count ਨੂੰ ਵਧਾਓ" ਨਹੀਂ ਹੈ।
ਇਸਦਾ ਮਤਲਬ ਹੈ "count ਨੂੰ ਇਸ ਖਾਸ ਮੁੱਲ (value) 'ਤੇ ਸੈੱਟ ਕਰੋ।"
ਜੇਕਰ count 0 ਹੈ, ਤਾਂ ਹਰ ਲਾਈਨ React ਨੂੰ count ਨੂੰ 1 'ਤੇ ਸੈੱਟ ਕਰਨ ਲਈ ਕਹਿੰਦੀ ਹੈ। React ਇਹਨਾਂ ਨੂੰ batch ਕਰਦਾ ਹੈ ਅਤੇ ਦੇਖਦਾ ਹੈ ਕਿ ਆਖਰੀ ਹਦਾਇਤ count ਨੂੰ 1 'ਤੇ ਸੈੱਟ ਕਰਨ ਦੀ ਹੈ।
The Solution: Functional Updates ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ functional update ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਇਹ update queue ਵਿੱਚ ਉਪਲਬਧ ਸਭ ਤੋਂ ਨਵੀਨਤਮ (latest) state ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਸਹੀ ਤਰੀਕਾ:
setCount((prev) => prev + 1);
ਜਦੋਂ ਤੁਸੀਂ ਇਸ pattern ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ React ਹਰ update ਨੂੰ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਮੁੱਲ (value) ਦਿੰਦਾ ਹੈ।
- ਪਹਿਲਾ update: 0 + 1 = 1
- ਦੂਜਾ update: 1 + 1 = 2
- ਤੀਜਾ update: 2 + 1 = 3
ਹੁਣ counter ਅਸਲ ਵਿੱਚ 3 ਤੱਕ ਪਹੁੰਚ ਜਾਂਦਾ ਹੈ।
A Common Mistake
ਮੈਂ ਇੱਕ ਵਾਰ ਲਿਖਿਆ ਸੀ:
setCount((prev) => { prev + 1 });
Counter undefined ਹੋ ਗਿਆ।
ਜਦੋਂ ਤੁਸੀਂ arrow function ਵਿੱਚ curly braces ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ return keyword ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਵੇਗੀ।
ਇਸ ਦੀ ਬਜਾਏ ਇਹ ਵਰਤੋ:
setCount((prev) => prev + 1);
Key Takeaways:
- React ਸਪੀਡ ਵਧਾਉਣ ਲਈ ਕਈ state updates ਨੂੰ batch ਕਰਦਾ ਹੈ।
setStatecalls ਹਮੇਸ਼ਾ ਤੁਰੰਤ renders ਨੂੰ trigger ਨਹੀਂ ਕਰਦੇ।- Standard updates ਮੌਜੂਦਾ render cycle ਤੋਂ ਮੁੱਲ (value) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
- Functional updates update queue ਤੋਂ ਸਭ ਤੋਂ ਨਵੀਨਤਮ state ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
- React ਇਹਨਾਂ ਬਦਲਾਅਾਂ ਨੂੰ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਇੱਕ ਅੰਦਰੂਨੀ Update Queue ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।