Queueing a Series of State Updates

রিয়াক্ট প্রতিটা রেন্ডারে মাল্টিপল স্টেট আপডেটকে 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>
    </>
  );
}

কোডের ব্যাখ্যা

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

তুমি যখন আমাদের ডিসের কি অবস্থা? বাটনে ক্লিক করছো, তখন বাটনের হ্যান্ডলার ফাংশনের ভিতর তিনটি স্টেট আপডেট হচ্ছে:

1. প্রথম স্টেট আপডেট: ডিসের স্ট্যাটাস পরিবর্তিত হচ্ছে আপনার ডিশটি রান্না করা হচ্ছে।
2. দ্বিতীয় স্টেট আপডেট: ডিসের স্ট্যাটাস পরিবর্তিত হচ্ছে আপনার ডিসটি রান্না করা হয়ে গেছে।
3. তৃতীয় স্টেট আপডেট: ডিসের স্ট্যাটাস পরিবর্তিত হচ্ছে আপনার ডিসটি পরিবেশন করা হয়েছে, ইনজয় দ্যা ডিস।

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

কিন্তু বাস্তবে তুমি শুধুমাত্র শেষ স্ট্যাটাস আপনার ডিসটি পরিবেশন করা হয়েছে, ইনজয় দ্যা ডিস দেখতে পাবে।

কেন এমন হলো?

রিয়াক্ট কিভাবে এই আচরণ পরিচালনা করে তা বুঝতে হলে প্রথমে জানতে হবে কিভাবে রিয়াক্ট স্টেট আপডেট করে।

• রিয়াক্ট স্টেটগুলোকে ব্যাচ আপডেট করে: যখন একটি event handler function এর ভিতর স্টেট আপডেট হয় এবং সেই ইভেন্ট হ্যান্ডলারের মধ্যে একাধিক স্টেট আপডেট থাকে, তখন রিয়াক্ট প্রথম 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(
    "মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে"
  );
 
  return (
    <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(
    "মাত্র অর্ডার রিসিভ করা হয়েছে এবং রান্নার জন্য পাঠানো হয়েছে"
  );
 
  return (
    <button
      onClick={() => {
        setDishStatus(
          (prevStatus) => `${prevStatus}, আপনার ডিশটি রান্না করা হচ্ছে`
        );
        setDishStatus(
          (prevStatus) => `${prevStatus}, আপনার ডিসটি রান্না করা হয়ে গেছে`
        );
        setDishStatus(
          (prevStatus) =>
            `${prevStatus}, আপনার ডিসটি পরিবেশন করা হয়েছে, ইনজয় দ্যা ডিস`
        );
      }}
    >
      আমাদের ডিসের কি অবস্থা?
    </button>
  );
}

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

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

যদি আমরা উপরের updater function পদ্ধতিতে স্টেট আপডেট করি, তাহলে ফাইনালি আমরা তিনটি চেঞ্জ ভ্যালু দেখতে পাবো:

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

রিয়াক্টের ব্যাচ আপডেটিংয়ের সুবিধা

রিয়াক্টের এই ব্যাচ আপডেটিংয়ের সুবিধা হলো, এটি পারফরম্যান্স বাড়ায়। যখন একাধিক স্টেট আপডেট হয়, তখন রিয়াক্ট একবারেই রেন্ডার করে, যার ফলে unnecessary রেন্ডারিং কমে যায় এবং ইউজার ইন্টারফেস দ্রুততর হয়।

উপসংহার

রিয়াক্ট স্টেট আপডেটকে ব্যাচ করে কাজ করে, যাতে ইউজার ইন্টারফেসের পারফরম্যান্স বজায় থাকে। তুমি যখন setDishStatus বা অন্য কোনো স্টেট আপডেট ফাংশন ব্যবহার করো, তখন তুমি বুঝতে পারবে যে রিয়াক্ট কিভাবে ওই স্টেটগুলোকে কিউ করে এবং তাদের একসাথে আপডেট করে। এর মাধ্যমে, রিয়াক্ট নিশ্চিত করে যে অ্যাপ্লিকেশনটি গতিশীল এবং সাড়া দেয়ার ক্ষেত্রে দ্রুত।