রিয়াক্ট প্রতিটা রেন্ডারে মাল্টিপল স্টেট আপডেটকে Queue হিসেবে নেয় এবং একসাথে ব্যাচ করে আপডেট করে । এজন্য বলা হয় React Queueing a Series of State Updates চলুন এ-ব্যাপেরে বিস্তারিত বুঝিঃ

React batches multiple state updates (রিয়াক্ট মাল্টিপল স্টেট আপডেট গুলোকে ব্যাচ করে):

চলুন একটা কোডের মাধ্যমে বুঝিঃ

চিন্তা করুন আপনি হোটেলে এসেছেন এবং হোটেলের ওয়েটারকে হয়তো কোন একটা ডিস অর্ডার করেছেন, এবং কিছুক্ষণ পর ওয়েটার আপনাকে আপনার ডিসের অবস্থা জানাবে বা পরিবেশন করবে ।

চলুন এবার একটু কোডের দিকে তাকাই,

import { useState } from "react";
 
export default function App() {
    const [disStatus, setDishStatus] = useState(
        "মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে"
    );
 
    return (
        <>
            <h1>{disStatus}</h1>
            <button
                onClick={() => {
                    setDishStatus("আপনার ডিশটি রান্না করা হচ্ছে");
                    setDishStatus("আপনার ডিসটি রান্না করা হয়ে গেছে");
                    setDishStatus(
                        "আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস"
                    );
                }}>
                আমাদের ডিসের কি অবস্থা ?
            </button>
        </>
    );
}

আপনি যখন ওর্ডার দিয়েছেন তখন আপনার ডিশের স্টেট হলো মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে যা এই কোডে রিয়াক্টের ইনিশিয়াল স্টেট।

এরপর আপনি আপনার ডিসের অবস্থা জানার জন্য আমাদের ডিসের কি অবস্থা ? button এ ক্লিক করলেন ।

আপনি যখন বাটনে ক্লিক করলেন তখন বাটনের হেন্ডেলার ফাংশনের ভিতরে তিনটি ধাপে আপনার ডিসের স্ট্যাটাস চেঞ্জ হচ্ছে বা স্টেট আপডেট হচ্ছে।

1. প্রথম স্টেট আপডেটে ডিসের স্ট্যাটাস disStatus করা হয়েছে আপনার ডিশটি রান্না করা হচ্ছে

2. দ্বিতীয় স্টেট আপডেটে ডিসের স্ট্যাটাস disStatus করা হয়েছে আপনার ডিসটি রান্না করা হয়ে গেছে

3. তৃতীয় স্টেট আপডেটে ডিসের স্ট্যাটাস disStatus করা হয়েছে আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস

এখন কি মনে হচ্ছে, আপনি কয়টি স্ট্যাটাস দেখতে পাবেন স্ক্রিনে ? পরপর তিনটি স্ট্যাটাস ই কি দেখতে পাওয়ার কথা যেহেতু এখানে তিনবার স্টেট চেঞ্জ হয়েছে তাহলে তিনবার কম্পোনেন্ট রি-রেন্ডার হবে এবং তিনবার এ তিনটি স্ট্যাটাস দেখতে পাওয়া যাবে ।

না এখানে তা দেখতে পাবেন না । এখানে আপনি একটা স্ট্যাটাস এ দেখতে পাবেন এবং তা হলো ফাইনাল স্ট্যাটাস আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস

এবার চলুন বুঝি এমন কেন হলো বা রিয়াক্ট কিভাবে এই কাজটা করলোঃ

• রিয়াক্ট স্টেটগুলোকে ব্যাচ আপডেট করে: তারমানে হলো কোন একটা event handler function এর ভিতর যদি স্টেট আপডেট হয় এবং যদি সেই ইভেন্ট হেন্ডেলারের ভিতর মাল্টিপল স্টেট আপডেট থাকে, যেমনঃ

export default function App() {
    <button
        onClick={() => {
            setDishStatus("আপনার ডিশটি রান্না করা হচ্ছে");
            setDishStatus("আপনার ডিসটি রান্না করা হয়ে গেছে");
            setDishStatus("আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস");
        }}>
        আমাদের ডিসের কি অবস্থা ?
    </button>;
}

এই কোডে তিনবার setDishStatus করা হয়েছে । তাহলে রিয়াক্ট শুধু প্রথম setter function পেয়েই সাথে সাথে রি-রেন্ডার ট্রিগার করেনা বরং ওই event handler function এর ভিতরের সমস্ত কোড এক্সিকিউট হউয়ার পর ট্রিগার হয় । এবং তখন ওই event handler function এর ভিতরের সমস্ত স্টেট আপডেটকে ব্যাচ করে নিয়ে যায় এবং একটা স্টেটের কিউ ম্যেনেজ করে। এবং তারপর কিউ থেকে প্রতিটা স্টেট এক এক করে চেঞ্জ করে। এবং পরের রেন্ডারে সমস্ত আউটপুট একসাথে পাওয়া যায়।

এখন প্রশ্ন জাগতে পারে যে,যদি তাই হয় তাহলেতো আমরা প্রথম উদাহরণের কোডের আউটপুট হিসেবে তিনটা স্টেট চেঞ্জের আউটপুট ই পেতাম।

তাহলে চলুন এটাও আরেকটু ভালোভাবে বুঝিঃ

Updating the same state multiple times before the next render

রিয়াক্ট এর স্টেট আপডেট করা জন্য যেই ফাংশনে আপরা স্টেট চেঞ্জ করি সেখানে দুইটা উপায়ে করা যায়ঃ

1. Replace the value of state with setter function:

export default function App() {
    const [disStatus, setDishStatus] = useState(
        "মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে"
    );
    <button
        onClick={() => {
            setDishStatus("আপনার ডিশটি রান্না করা হচ্ছে");
            setDishStatus("আপনার ডিসটি রান্না করা হয়ে গেছে");
            setDishStatus("আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস");
        }}>
        আমাদের ডিসের কি অবস্থা ?
    </button>;
}

আমরা যখন এইভাবে স্টেট আপডেট করছি তখন আসলে স্টেট এর পূর্বের ভ্যালুটাকে রিপ্লেস করে দিয়ে নতুন ভ্যালু দিচ্ছি। তাই উপরের উদাহরণে যখন লাস্ট setter function কল হয়েছে তখন disStatus রিপ্লেস হয়ে গিয়েছে। তাই আমরা আউটপুটে শুধু আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস এটাই দেখতে পেয়েছি।

2. Update the value of state with updater function:

export default function App() {
    const [disStatus, setDishStatus] = useState(
        "মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে"
    );
    <button
        onClick={() => {
            setDishStatus((d) => `${d} , আপনার ডিশটি রান্না করা হচ্ছে `);
            setDishStatus((d) => `${d} , আপনার ডিসটি রান্না করা হয়ে গেছে `);
            setDishStatus(
                (d) => `${d} , আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস `
            );
        }}>
        আমাদের ডিসের কি অবস্থা ?
    </button>;
}

এখানে আমরা setDishStatus এর ভিতরে একটা anonymous Arrow ফাংশনের সিনট্যাক্স ব্যাবহার করেছি, যা প্যারামিটারে আগের স্টেট ভ্যালুটা রিসিভ করে। এবং তারপর তার সাথে নতুন ভ্যালু যোগ করে ভ্যালু আপডেট করে।

এভাবে করলে প্রতিটা স্টেট আপডেট করার সময় আগের স্টেটের ভ্যালুটা পাওয়া যায়,এবং সেই ভ্যালু দিয়ে নতুন ভ্যালু আপডেট করা যায়।

উপরের updater function এর উপায়ে যদি আমরা স্টেট আপডেট করি তাহলে আমরা তিনটা চেঞ্জ ভেলুই ফাইনালি দেখতে পাবো এভাবেঃ মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে,আপনার ডিশটি রান্না করা হচ্ছে,আপনার ডিসটি রান্না করা হয়ে গেছে,আপনার ডিসটি পরিবেশন করা হয়েছে , ইনজয় দ্যা ডিস