React सीखने का 5वां दिन: Batching और Functional Updates
मुझे लगा था कि state setter को कई बार कॉल करने से कई बार renders होते हैं।
मैं गलत था।
React इससे कहीं अधिक स्मार्ट है। यह Automatic Batching नामक प्रक्रिया का उपयोग करता है।
हर एक update के बाद render करने के बजाय, React उन्हें एक साथ group कर देता है। यह सभी updates को इकट्ठा करता है और केवल एक बार render करता है। इससे performance बेहतर होती है।
आज मैंने जो सीखा, वह यहाँ है।
Batching की प्रक्रिया जब आप कई state functions को कॉल करते हैं, तो React इस प्रवाह (flow) का पालन करता है:
- कई state updates होते हैं।
- React उन्हें एक साथ batch कर देता है।
- React एक बार render करता है।
- React UI में बदलावों को commit कर देता है।
Standard Updates के साथ समस्या
मैंने यह कोड आज़माया:
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
मुझे उम्मीद थी कि count 0 से 3 तक जाएगा। लेकिन यह 0 से 1 ही हुआ।
ऐसा इसलिए होता है क्योंकि setCount(count + 1) का मतलब "count को बढ़ाना" नहीं है।
इसका मतलब है "count को इस विशिष्ट (specific) वैल्यू पर सेट करना।"
यदि count 0 है, तो हर लाइन React को count को 1 पर सेट करने के लिए कहती है। React इन्हें batch करता है और देखता है कि अंतिम निर्देश count को 1 पर सेट करने का है।
समाधान: Functional Updates इसे ठीक करने के लिए, आपको functional update का उपयोग करना चाहिए। यह update queue में उपलब्ध नवीनतम (latest) state का उपयोग करता है।
सही तरीका:
setCount((prev) => prev + 1);
जब आप इस pattern का उपयोग करते हैं, तो React प्रत्येक update को सबसे हालिया (most recent) वैल्यू देता है।
- पहला update: 0 + 1 = 1
- दूसरा update: 1 + 1 = 2
- तीसरा update: 2 + 1 = 3
अब counter वास्तव में 3 तक पहुँच जाता है।
एक सामान्य गलती
मैंने एक बार लिखा था:
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 की वैल्यू का उपयोग करते हैं।
- Functional updates update queue से नवीनतम state का उपयोग करते हैं।
- React इन बदलावों को मैनेज करने के लिए एक internal Update Queue का उपयोग करता है।