React शिकण्याचा ५ वा दिवस: Batching आणि Functional Updates
मला वाटले की state setter अनेक वेळा कॉल केल्यामुळे अनेक वेळा renders होतात.
मी चुकीचा होतो.
React त्यापेक्षाही हुशार आहे. ते Automatic Batching नावाच्या प्रक्रियेचा वापर करते.
प्रत्येक अपडेटनंतर render करण्याऐवजी, React त्यांना एकत्र गटबद्ध (group) करते. ते सर्व अपडेट्स गोळा करते आणि फक्त एकदाच render करते. यामुळे परफॉर्मन्स वाचतो.
आज मी काय शिकलो ते खालीलप्रमाणे आहे.
The Batching Process जेव्हा तुम्ही एकापेक्षा जास्त state functions कॉल करता, तेव्हा React या प्रक्रियेचे पालन करते:
- अनेक 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 या विशिष्ट व्हॅल्यूवर सेट करा" असा असतो.
जर count 0 असेल, तर प्रत्येक ओळ React ला count 1 सेट करण्यास सांगते. React या सर्वांना batch करते आणि त्याला दिसते की शेवटची सूचना count 1 सेट करण्याची आहे.
The Solution: Functional Updates हे सुधारण्यासाठी, तुम्हाला functional update वापरावे लागेल. हे update queue मध्ये उपलब्ध असलेली सर्वात नवीन state वापरते.
योग्य पद्धत:
setCount((prev) => prev + 1);
जेव्हा तुम्ही ही पद्धत वापरता, तेव्हा React प्रत्येक अपडेटला सर्वात अलीकडील (most recent) व्हॅल्यू देते.
- पहिले अपडेट: 0 + 1 = 1
- दुसरे अपडेट: 1 + 1 = 2
- तिसरे अपडेट: 2 + 1 = 3
आता counter खरोखर 3 पर्यंत पोहोचतो.
A Common Mistake
मी एकदा असे लिहिले होते:
setCount((prev) => { prev + 1 });
counter undefined झाले.
जेव्हा तुम्ही arrow function मध्ये curly braces वापरता, तेव्हा तुम्हाला return कीवर्ड वापरणे आवश्यक आहे.
त्याऐवजी हे वापरा:
setCount((prev) => prev + 1);
Key Takeaways:
- वेग वाढवण्यासाठी React अनेक state updates एकत्र batch करते.
setStateकॉल्स नेहमीच त्वरित renders ट्रिगर करत नाहीत.- Standard updates सध्याच्या render cycle मधील व्हॅल्यू वापरतात.
- Functional updates update queue मधील सर्वात नवीन state वापरतात.
- React या बदलांचे व्यवस्थापन करण्यासाठी अंतर्गत Update Queue वापरते.