Day 5 of Learning React: Batching and Functional Updates
আমি ভেবেছিলাম state setter একাধিকবার কল করলে একাধিকবার render হয়।
আমি ভুল ছিলাম।
React তার চেয়েও বেশি বুদ্ধিমান। এটি Automatic Batching নামক একটি প্রক্রিয়া ব্যবহার করে।
প্রতিটি আপডেটের পর render করার পরিবর্তে, React সেগুলোকে একত্রে গ্রুপ করে। এটি সব আপডেট সংগ্রহ করে এবং মাত্র একটি render সম্পন্ন করে। এটি পারফরম্যান্স সাশ্রয় করে।
আজ আমি যা শিখেছি তা নিচে দেওয়া হলো।
The Batching Process যখন আপনি একাধিক state function কল করেন, React এই ধাপগুলো অনুসরণ করে:
- একাধিক state update ঘটে।
- React সেগুলোকে একত্রে batch করে।
- React একটি render সম্পন্ন করে।
- React UI-তে পরিবর্তনগুলো commit করে।
The Problem with Standard Updates আমি এই কোডটি চেষ্টা করেছিলাম: setCount(count + 1); setCount(count + 1); setCount(count + 1);
আমি আশা করেছিলাম count ০ থেকে ৩ পর্যন্ত বাড়বে। কিন্তু এটি ০ থেকে ১ হলো।
এটি ঘটে কারণ setCount(count + 1) মানে "count বৃদ্ধি করা" নয়। এর মানে হলো "count-কে এই নির্দিষ্ট মানটিতে সেট করা।"
যদি count ০ হয়, তবে প্রতিটি লাইন React-কে count ১ সেট করতে বলে। React এগুলোকে batch করে এবং দেখে যে শেষ নির্দেশটি হলো count ১ সেট করা।
The Solution: Functional Updates এটি ঠিক করতে আপনাকে একটি functional update ব্যবহার করতে হবে। এটি update queue-তে থাকা সর্বশেষ state ব্যবহার করে।
সঠিক পদ্ধতি: setCount((prev) => prev + 1);
যখন আপনি এই প্যাটার্নটি ব্যবহার করেন, React প্রতিটি আপডেটের জন্য সবচেয়ে সাম্প্রতিক মান প্রদান করে।
- প্রথম আপডেট: 0 + 1 = 1
- দ্বিতীয় আপডেট: 1 + 1 = 2
- তৃতীয় আপডেট: 2 + 1 = 3
এখন counter টি প্রকৃতপক্ষে ৩-এ পৌঁছায়।
A Common Mistake আমি একবার লিখেছিলাম: setCount((prev) => { prev + 1 });
Counter টি undefined হয়ে গিয়েছিল। যখন আপনি একটি arrow function-এ curly braces ব্যবহার করেন, তখন আপনাকে অবশ্যই return keyword ব্যবহার করতে হবে। এর পরিবর্তে এটি ব্যবহার করুন: setCount((prev) => prev + 1);
Key Takeaways:
- গতি বাড়াতে React একাধিক state update-কে batch করে।
- setState কল সবসময় তাৎক্ষণিক render ট্রিগার করে না।
- Standard updates বর্তমান render cycle থেকে মান ব্যবহার করে।
- Functional updates update queue থেকে সর্বশেষ state ব্যবহার করে।
- React এই পরিবর্তনগুলো পরিচালনা করতে একটি অভ্যন্তরীণ Update Queue ব্যবহার করে।