State আর event — useState, snapshot আর re-render

১ · সাধারণ variable কেন স্ক্রিন বদলায় না

পর্ব ০৭-এ আপনি component, পর্ব ০৮-এ JSX আর পর্ব ০৯-এ props দেখেছেন। কিন্তু এখনো সবকিছু স্থির। বাজারঘরের “কার্টে যোগ করুন” বোতামে চাপ দিলে কিছু বদলাবে কীভাবে? JavaScript জানা মানুষের প্রথম চেষ্টা হয় এরকম: একটি let variable নিন, ক্লিকে বাড়িয়ে দিন। চলুন সেটিই পাশাপাশি চালিয়ে দেখি।

নিচের ব্লকে দুটি বোতাম আছে। “চালান” চেপে আগে plain +1 তিনবার চাপুন, তারপর state +1 একবার। নিচের log খেয়াল করুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Counter() {
  let plain = 0;
  const [count, setCount] = useState(0);
  console.log(`render: plain=${plain}, count=${count}`);

  function handlePlain() {
    plain = plain + 1;
    console.log(`handlePlain: plain=${plain}`);
  }

  return (
    <div>
      <button onClick={handlePlain}>plain +1</button>{' '}
      <button onClick={() => setCount(count + 1)}>state +1</button>
      <p>plain: {plain} · state: {count}</p>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<Counter />);
</script>

render: plain=0, count=0
handlePlain: plain=1
handlePlain: plain=2
handlePlain: plain=3
render: plain=0, count=1

এখান থেকে দুটি দরকার স্পষ্ট হয়। এক, মানটি এক render থেকে পরের render পর্যন্ত টিকে থাকতে হবে। দুই, মান বদলালে React-কে জানাতে হবে, যাতে সে স্ক্রিন নতুন করে আঁকে। State এই দুটি কাজই করে।

২ · useState — React-এর কাছে রাখা খাতা

useState একটি hook, মানে React-এর ভেতরের সুবিধায় ঢোকার একটি বিশেষ function. এটি ডাকলে দুটি জিনিস পাবেন, একটি দুই ঘরের array হিসেবে:

import { useState } from "react";

function ProductCard() {
  const [qty, setQty] = useState(1);
  // qty: এখনকার মান, setQty: মান বদলানোর অনুরোধ, 1: প্রথমবারের মান
  return <button onClick={() => setQty(qty + 1)}>পরিমাণ: {qty}</button>;
}

এই পর্বে নিচের ব্লকগুলোতে import লেখা হবে না, কারণ পাতার ভেতরের React পরীক্ষাগারে সব export আগে থেকেই আছে। নিজের Vite project-এ import লাগবে, যেমন পর্ব ০৫-এ কাজের পরিবেশ তৈরির সময় দেখেছেন। লেখার সময়ে React-এর সংস্করণ 19.3.1.

ঠিক কী ঘটে, তা তিন ধাপে মনে রাখুন। React-এর নিজের ভাষাতেও এই তিনটি নাম আছে: trigger, render, commit.

“Render” শব্দটি নিয়ে একটি ভুল ধারণা খুব প্রচলিত। Render মানে স্ক্রিনে আঁকা নয়। Render মানে React আপনার component function-টি ডাকল। ওই function যে JSX ফেরত দিল, তার সাথে আগের JSX মিলিয়ে React দেখে কী বদলেছে। তারপর commit ধাপে শুধু সেটুকুই DOM-এ বসায়। এই মেলানোর ভেতরের নিয়ম আসবে পর্ব ১৫-এ।

useState(1)-এর 1 শুধু প্রথম render-এ কাজে লাগে। পরের render-গুলোতে React খাতা থেকে এখনকার মান ফেরত দেয়। Hook ডাকার নিয়মও এখানেই: component-এর একদম ওপরের স্তরে ডাকতে হয়, if বা loop-এর ভেতরে নয়। কেন, তা প্র ০৪-এ দেখবেন। পুরো নিয়ম আসবে পর্ব ১৪-এ।

৩ · State একটি snapshot

এই অংশটি পরিষ্কার হলে পুরো পর্ব সহজ হয়ে যাবে। আগে একটি ছোট প্রশ্ন। নিচের handler-এ setCount(count + 1)-এর ঠিক পরের লাইনে console.log(count) আছে। ক্লিকে কী ছাপা হবে, 0 নাকি 1? অনেকে 1 বলেন, আর তখনই হোঁচট খান।

React-এর উত্তর 0. কারণ count কোনো জীবন্ত বাক্স নয়। এটি একটি সাধারণ const, যার মান ওই একটি render-এর জন্য বাঁধা। Render যেন ক্যামেরার একটি ছবি, আর সেই ছবির ভেতরে থাকে props, state আর event handler, সবই ওই মুহূর্তের। Handler নিজের ছবির count মনে রাখে, যা JavaScript-এর closure-এর সাধারণ আচরণ। “পরে” চেপে তিনটি render ধরে মানগুলো দেখুন।

1function Counter() {2  const [count, setCount] = useState(0);3  function handleClick() {4    setCount(count + 1);5    console.log(count);6  }7  return <button onClick={handleClick}>{count}</button>;8}

এই আচরণ বাগ নয়, বরং একটি নিরাপত্তা। ধরুন বাজারঘরে একটি বোতাম ৩ সেকেন্ড পরে অর্ডার পাঠায়:

function SendOrder() {
  const [phone, setPhone] = useState("০১৭১১");

  function handleSend() {
    setTimeout(() => console.log("অর্ডার যাচ্ছে:", phone), 3000);
  }
  // ...
}

ক্লিকের পর ৩ সেকেন্ডের মধ্যে ব্যবহারকারী ফোন নম্বর বদলালেও phone থাকবে ক্লিকের মুহূর্তের মান। আপনি যে স্ক্রিন দেখে চেপেছিলেন, অর্ডারও সেই স্ক্রিনের মান নিয়েই যায়। তবে কখনো কখনো ঠিক উল্টোটা দরকার হয়, মানে সর্বশেষ মান। তখন এই পুরোনো মানকে বলে stale closure, যার সমাধান আসবে পর্ব ১৩ আর ১৪-এ।

৪ · Batching আর updater function

রেস্তোরাঁর ওয়েটার তিনজনের টেবিলে গিয়ে প্রথম পদ শুনেই রান্নাঘরে দৌড়ান না। তিনি পুরো অর্ডার খাতায় টুকে নেন, তারপর একবারে যান। React-ও তাই করে। একটি handler-এ যতগুলো set ডাকা হোক, সবগুলো একটি সারিতে জমা হয়। Handler শেষ হলে React সারিটি শেষ পর্যন্ত হিসাব করে একটিমাত্র render করে। একেই বলে batching.

এবার ক্লাসিক প্রশ্নটি। এক ক্লিকে তিনবার setCount(count + 1) লিখলে কত বাড়বে? নিচে দুটি বোতাম। প্রথমটি মান পাঠায়, দ্বিতীয়টি updater function পাঠায়। দুটিই একবার করে চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Triple() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  console.log(`render: a=${a}, b=${b}`);

  function byValue() {
    setA(a + 1);
    setA(a + 1);
    setA(a + 1);
    console.log(`byValue শেষ, ছবির a=${a}`);
  }

  function byUpdater() {
    setB(x => x + 1);
    setB(x => x + 1);
    setB(x => x + 1);
    console.log(`byUpdater শেষ, ছবির b=${b}`);
  }

  return <div>
    <button onClick={byValue}>মান: {a}</button>{' '}
    <button onClick={byUpdater}>updater: {b}</button>
  </div>;
}
createRoot(document.getElementById('root')).render(<Triple />);
</script>

render: a=0, b=0
byValue শেষ, ছবির a=0
render: a=1, b=0
byUpdater শেষ, ছবির b=0
render: a=1, b=3

সারির নিয়ম খুব ছোট। মান পাঠালে মানে “আগের সব ফেলে এটি বসান”। Function পাঠালে মানে “আগের ফল নিয়ে এই হিসাব করুন”। মিশিয়ে দিলে কী হয়, ধাপে ধাপে দেখুন।

1// এখন n = 02function handleClick() {3  setN(n + 5);4  setN(x => x + 1);5  setN(x => x * 2);6}

সারির ফল হিসাব করার নিয়মটি হাতে করা সহজ, পরীক্ষায়ও এটি প্রায়ই আসে। ধরুন n = 0, আর handler-এ আছে setN(n + 5); setN(x => x + 1); setN(x => x * 2); setN(n + 1);

শেষের মানটি আগের সব কাজ মুছে দিল। ফল 1, render একটি। React 19.3.1-এ চালিয়ে আমরা এই একই ফল পেয়েছি। কয়েকটি আরও মাপ, একটি local run থেকে:

শেষ সারিটি মনে রাখবেন। await-এ handler থেমে যায়, তাই React আগের আপডেটটুকু নিয়ে render করে ফেলে। আর দুটি আলাদা ক্লিক কখনো এক batch-এ যায় না, প্রতিটি ক্লিক নিজের মতো সম্পূর্ণ হয়।

৫ · Event handler — function পাঠান, ডাকবেন না

DOM event-এর মূল ধারণা, মানে capture আর bubble, JavaScript কোর্সের event পর্বে আছে। এখানে শুধু React-এর দিকটি দেখি। Event handler হলো সেই function, যা কোনো ঘটনা ঘটলে চলে। JSX-এ এটি camelCase prop হিসেবে যায়, যেমন onClick, onChange, onSubmit.

নতুনদের সবচেয়ে সাধারণ ভুল এখানে। পার্থক্য শুধু দুটি ব্র্যাকেটের:

শেষ সারির লুপটি মনে রাখার মতো। Render চলছে, সেখান থেকে setState, তাতে আবার render. React কিছুক্ষণ পর থামিয়ে দেয়, আর আপনি দেখেন Too many re-renders. এই মেসেজ দেখলেই প্রথমে খুঁজুন, কোথাও onClick={someFunction()} আছে কি না।

Handler যে e পায়, তা ব্রাউজারের আসল event নয়, React-এর মোড়ানো একটি object, যার নাম synthetic event. এর আচরণ সব browser-এ একই রকম, আর আসল event চাইলে e.nativeEvent-এ পাবেন। React প্রতিটি বোতামে আলাদা listener বসায় না, root-এ একটি জায়গায় বসায়।

দুটি method সবচেয়ে কাজের, আর এই দুটি একদম আলাদা জিনিস:

বাজারঘরের product card-এ দুটিই দরকার হয়। পুরো card-এ ক্লিক করলে পণ্যের পাতা খোলে, আর ভেতরের “কার্টে যোগ করুন” বোতামে ক্লিক করলে শুধু কার্টে যায়:

function ProductCard({ product, onOpen, onAdd }) {
  function handleAdd(e) {
    e.stopPropagation();          // card-এর onClick যেন না চলে
    onAdd(product.id);
  }

  function handleSearch(e) {
    e.preventDefault();           // পাতা reload হবে না
    console.log("খোঁজা হচ্ছে");
  }

  return (
    <div onClick={() => onOpen(product.id)}>
      <h3>{product.name}</h3>
      <button onClick={handleAdd}>কার্টে যোগ করুন</button>
      <form onSubmit={handleSearch}><button>খুঁজুন</button></form>
    </div>
  );
}

এখানে onAdd আর onOpen নামগুলো খেয়াল করুন। নিজের component-এর prop-এ on…, আর ভেতরের function-এ handle…, এটাই React-এর প্রচলিত রীতি। Form-এর পুরো কাজ আসবে পর্ব ১২-এ। React-এ onScroll ছাড়া সব event bubble করে, আর onClickCapture লিখলে নিচে নামার পথেই event ধরা যায়, যা সাধারণ app কোডে কম লাগে।

৬ · Object আর array — state না ভেঙে আপডেট

এতক্ষণ state ছিল একটি সংখ্যা। কার্ট কিন্তু object-এর array. এখানেই সবচেয়ে কঠিন বাগটি লুকিয়ে থাকে। নিচের ব্লকে দুটি বোতাম আছে। “ভুল” বোতাম দুবার চাপুন, তারপর “ঠিক” বোতাম একবার।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Bug() {
  const [items, setItems] = useState(['চাল']);
  console.log(`render: ${items.join(', ')}`);

  function wrong() {
    items.push('ডাল');
    setItems(items);          // একই array
    console.log(`wrong: ভেতরে এখন ${items.length}টি`);
  }

  function right() {
    setItems([...items, 'তেল']);   // নতুন array
  }

  return <div>
    <button onClick={wrong}>ভুল: push</button>{' '}
    <button onClick={right}>ঠিক: নতুন array</button>
    <p>কার্টে {items.length}টি: {items.join(', ')}</p>
  </div>;
}
createRoot(document.getElementById('root')).render(<Bug />);
</script>

render: চাল
wrong: ভেতরে এখন 2টি
wrong: ভেতরে এখন 3টি
render: চাল, ডাল, ডাল, তেল

তাই নিয়ম একটাই: state-কে শুধু পড়ার জিনিস ভাবুন। একে বলে immutable update, মানে পুরোনো জিনিস না বদলে নতুন কপি বানানো। আর সরাসরি বদলে ফেলাকে বলে mutation. পুরোনো ছবি মুছে পাল্টানোর মতো, এতে snapshot-এর পুরো নিশ্চয়তাই ভেঙে যায়।

... চিহ্নটি spread syntax, বিস্তারিত JavaScript কোর্সের destructuring আর spread পর্বে আছে। একটি সতর্কতা: spread শুধু এক স্তর কপি করে। { ...user }-এর ভেতরের address object আগেরটিই থেকে যায়। ভেতরের কিছু বদলাতে হলে সেই স্তরটিও কপি করতে হয়।

এবার সব মিলিয়ে বাজারঘরের সত্যিকারের কার্ট। এই ক্রমে চাপুন: ডাল যোগ, চালের পাশে +, আবার ডাল যোগ, তারপর চালের পাশে বাদ.

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const dal = { id: 2, name: 'ডাল', price: 120, qty: 1 };
function Cart() {
  const [items, setItems] = useState([{ id: 1, name: 'চাল', price: 80, qty: 1 }]);
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  console.log(`লাইন ${items.length}টি, মোট ${total} টাকা`);

  const add = () => setItems(prev => prev.some(i => i.id === dal.id)
    ? prev.map(i => i.id === dal.id ? { ...i, qty: i.qty + 1 } : i)
    : [...prev, dal]);
  const changeQty = (id, by) => setItems(prev => prev.map(i =>
    i.id === id ? { ...i, qty: Math.max(1, i.qty + by) } : i));
  const remove = id => setItems(prev => prev.filter(i => i.id !== id));

  return (
    <div>
      {items.map(i => (
        <p key={i.id}>
          {i.name} × {i.qty}{' '}
          <button onClick={() => changeQty(i.id, 1)}>+</button>
          <button onClick={() => changeQty(i.id, -1)}>−</button>
          <button onClick={() => remove(i.id)}>বাদ</button>
        </p>))}
      <button onClick={add}>ডাল যোগ</button> <b>মোট: {total} টাকা</b>
    </div>);
}
createRoot(document.getElementById('root')).render(<Cart />);
</script>

লাইন 1টি, মোট 80 টাকা
লাইন 2টি, মোট 200 টাকা
লাইন 2টি, মোট 280 টাকা
লাইন 2টি, মোট 400 টাকা
লাইন 1টি, মোট 240 টাকা

“হাজার আইটেমের কার্টে প্রতিবার কপি করলে ধীর হবে না?” map নতুন array বানায় ঠিকই, কিন্তু object-গুলো কপি করে না, শুধু reference নেয়। আমরা ১০০০ আইটেমের array-তে ৫০০ নম্বর আইটেম বদলে মেপেছি: ৯৯৯টি object হুবহু আগের, নতুন মাত্র ১টি। একে বলে structural sharing. খরচ ১০০০ ঘরের একটি array, অর্থাৎ O(n), যা সাধারণ কার্টে নগণ্য।

Linter কি এই ভুল ধরে? আংশিক। নিচের ফলটি সত্যিকারের run, eslint-plugin-react-hooks 7.1.1 আর ESLint 10.14.0 দিয়ে। src/QtyBug.jsx-এ item.qty = item.qty + 1 আছে, আর src/PushBug.jsx-এ উপরের মতো items.push(...).

সত্যিকারের run · project-এর পথ বদলে ~/bazarghar করা হয়েছে

$ npx eslint src
~/bazarghar/src/QtyBug.jsx
  7:5  error  Error: This value cannot be modified

Modifying a value returned from 'useState()', which should not be modified directly. Use the setter function to update instead.

>  7 |     item.qty = item.qty + 1;
     |     ^^^^ `item` cannot be modified
  …  react-hooks/immutability

✖ 1 problem (1 error, 0 warnings)

ঘরে মান বসানো ধরা পড়েছে, কিন্তু PushBug.jsx নিয়ে একটি শব্দও আসেনি। এই সংস্করণের এই configuration-এ push পার হয়ে গেছে। তাই linter সবুজ মানেই কোড ঠিক নয়। নিয়মটি আপনার নিজের মাথায় থাকতে হবে। ভবিষ্যতের সংস্করণে এই আচরণ বদলাতে পারে।

৭ · State-এর গঠন — যা হিসাব করা যায়, তা রাখবেন না

কোন জিনিস state হবে, এই সিদ্ধান্ত বেশিরভাগ বাগ শুরু হওয়ার আগেই থামাতে পারে। চায়ের দোকানের খাতায় প্রতিটি কাপের দাম লেখা থাকে। মোট টাকা আলাদা করে আরেক খাতায় লিখলে কী হবে? একদিন একটি খাতা ঠিক হবে, অন্যটি ভুলে যাবেন। তখন দুই খাতার ঝগড়া। React-এর state-এও ঠিক একই ঘটনা ঘটে।

নিচের কোডে দুটি সমস্যা আছে। প্রথমে নিজে খুঁজে দেখুন:

function Cart({ initialItems }) {
  const [items, setItems] = useState(initialItems);
  const [total, setTotal] = useState(0);           // redundant
  const [selected, setSelected] = useState(items[0]);  // duplicate

  function addOne(id) {
    setItems(/* ... */);
    setTotal(/* আবার হিসাব, ভুলে গেলেই বাগ */);
  }
}

function Cart({ initialItems }) {
  const [items, setItems] = useState(initialItems);
  const [selectedId, setSelectedId] = useState(initialItems[0]?.id);

  // হিসাব করা মান: state নয়, render-এর সময় বের হয়
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  const selected = items.find(i => i.id === selectedId);
}

total ছিল redundant state, কারণ items থেকেই বের করা যায়। এমন মানকে বলে derived state. আর selected ছিল duplicate state, কারণ একই object দুই জায়গায় ছিল। items-এ পরিমাণ বদলালে selected-এর কপি পুরোনোই থেকে যেত। সমাধান, শুধু id রাখা। React-এর নিজের নথিতে এই পাঁচটি নিয়ম আছে:

একটি বিশেষ ভুল আলাদা করে বলা দরকার: prop-কে state-এ কপি করা। useState(messageColor) লিখলে parent পরে নতুন রং পাঠালেও state আগেরটিই থাকবে, কারণ useState-এর argument শুধু প্রথম render-এ কাজ করে। যদি সত্যিই শুধু শুরুর মান চান, নামেই তা বলে দিন: initialItems, যেমন উপরের কোডে। এই নিয়মে ডেটাবেসের normalization-এর গন্ধ পাচ্ছেন? ঠিকই, চিন্তাটা একই: একটি তথ্য এক জায়গায়, বাকিটা সেখান থেকে হিসাব।

৮ · State ওপরে তোলা — দুই ভাইবোনের ভাগের তথ্য

বাজারঘরের পাতায় দুটি component পাশাপাশি: ProductCard আর ওপরের CartBadge, যেখানে কার্টের সংখ্যা দেখায়। Card-এ চাপ দিলে Badge কীভাবে জানবে? React-এ ডেটা শুধু ওপর থেকে নিচে যায়, তাই পাশাপাশি দুটি component সরাসরি কথা বলতে পারে না। এর উত্তর lifting state up: state-কে দুজনের সবচেয়ে কাছের সাধারণ parent-এ তুলে নেওয়া।

Shop
├─ ProductCard
│    count: 1 (নিজের)
└─ CartBadge
     count: 0 (নিজের)

Shop
│    cartCount: 0
├─ ProductCard
│    state নেই
└─ CartBadge
     state নেই

Shop
│    cartCount: 0
├─ ProductCard
│    onAdd={handleAdd}
└─ CartBadge
     count={0}

Shop
│    cartCount: 0
├─ ProductCard
│    onAdd() ডাকল ↑
└─ CartBadge
     count={0}

Shop
│    cartCount: 1
├─ ProductCard
│    onAdd={handleAdd}
└─ CartBadge
     count={0}

Shop
│    cartCount: 1
├─ ProductCard
│    onAdd={handleAdd}
└─ CartBadge
     count={1} → স্ক্রিনে 1

function CartBadge({ count }) {
  return <span>কার্টে {count}টি</span>;
}

function ProductCard({ name, onAdd }) {
  return <button onClick={onAdd}>{name} যোগ করুন</button>;
}

function Shop() {
  const [cartCount, setCartCount] = useState(0);
  const handleAdd = () => setCartCount(c => c + 1);

  return (
    <>
      <CartBadge count={cartCount} />
      <ProductCard name="চাল" onAdd={handleAdd} />
    </>
  );
}

এখানে Shop হলো cartCount-এর single source of truth, মানে এই তথ্যের একমাত্র আসল ঠিকানা। State কোথায় রাখবেন, তা ঠিক করার পদ্ধতিটি সহজ: কে কে এই state ব্যবহার করে তা খুঁজুন, তাদের কাছের সাধারণ parent বের করুন, সেখানে রাখুন। অনেক স্তর পার করে props পাঠাতে হলে কী করবেন, আর global store কখন লাগে, তা আসবে পর্ব ১৬ থেকে ১৮-এ।

৯ · State কখন মুছে যায় — position আর key

State component-এর ভেতরে থাকে না, এটা শুনে অবাক লাগতে পারে। State থাকে React-এর কাছে, আর React তা বাঁধে tree-র একটি position-এর সাথে। ডাকঘরের বাক্সের মতো ভাবুন। চিঠি থাকে “১২ নম্বর বাক্সে”, মালিকের পকেটে নয়। বাক্সের গায়ে নাম বদলালেও চিঠি থেকে যায়, আর বাক্সটি সরিয়ে ফেললে চিঠিও শেষ।

নিয়মগুলো সংক্ষেপে: একই component একই position-এ থাকলে state থাকে, props বদলালেও। অন্য component বসলে, বা component সরে গেলে, state মুছে যায়। Parent-এর type বদলালেও, যেমন <div> থেকে <section>, ভেতরের সব state মুছে যায়। আর এখানে “position” মানে JSX ফাইলের লাইন নয়, মানে তৈরি হওয়া tree-র জায়গা।

এর একটি ব্যবহারিক ফাঁদ আছে। বাজারঘরের অ্যাডমিন চ্যাটে গ্রাহক বদলালেন, কিন্তু লেখার ঘরে আগের গ্রাহকের খসড়া রয়ে গেল, কারণ ChatBox একই position-এ। সমাধান key:

// গ্রাহক বদলালে key বদলায়, তাই ChatBox নতুন করে তৈরি হয়, খসড়া মুছে যায়
<ChatBox key={customer.id} customer={customer} />

উন্নত নোট: flushSync আর startTransition

এই দুটি টুল সাধারণ কাজে লাগে না। তবে batching-এর ছবি পূর্ণ করতে চিনে রাখুন। flushSync বলে “অপেক্ষা নয়, এখনই DOM আপডেট করুন”। নিচে React 19.3.1-কে jsdom-এ চালিয়ে দেখা হয়েছে, setN-এর পরের লাইনেই DOM-এ কী আছে।

setN(1);
console.log("no flush DOM:", text(), "renders:", renders);
await new Promise(r => setTimeout(r, 20));
console.log("later   DOM:", text(), "renders:", renders);
flushSync(() => setN(2));
console.log("flushSync DOM:", text(), "renders:", renders);
flushSync(() => setN(3));
flushSync(() => setN(4));
console.log("two flushSync DOM:", text(), "renders:", renders);

সত্যিকারের run · react 19.3.1, react-dom 19.3.1, jsdom 30.1.3, Node 24

$ node flush.mjs
start   DOM: 0 renders: 1
no flush DOM: 0 renders: 1
later   DOM: 1 renders: 2
flushSync DOM: 2 renders: 3
two flushSync DOM: 4 renders: 5

সাধারণ setN(1)-এর পরের লাইনে DOM তখনো 0. flushSync-এর পরের লাইনেই DOM নতুন মানে, আর প্রতিটি flushSync একটি করে বাড়তি render ঘটিয়েছে। অর্থাৎ batching-এর সুবিধা আপনি নিজে হাতে ছেড়ে দিচ্ছেন। React-এর নথি একে শেষ উপায় বলে, কারণ এতে performance খারাপ হতে পারে। এর বৈধ ব্যবহার সাধারণত React-এর বাইরের কোডের সাথে কাজে, যেমন ব্রাউজারের beforeprint event, যেখানে function শেষ হওয়ার আগেই DOM ঠিক থাকা দরকার। আমদানি হয় react-dom থেকে।

startTransition উল্টো কাজ করে: বলে “এই আপডেট জরুরি নয়”। বাজারঘরের ২০,০০০ পণ্যের তালিকা ফিল্টার করতে ভারী render লাগতে পারে। তখন startTransition(() => setTab(next)) লিখলে সেই render চলার মধ্যেও পাতা সাড়া দেয়, আর নতুন আপডেট এলে React ভারী কাজটি থামিয়ে আবার শুরু করে। সীমা তিনটি: টাইপ করার input নিয়ন্ত্রণে এটি চলে না, setTimeout-এর ভেতরের আপডেট transition হয় না, আর await-এর পরের আপডেটে আবার startTransition লিখতে হয়। Pending অবস্থা দেখাতে চাইলে useTransition. Performance নিয়ে বিস্তারিত পর্ব ২৩-এ।

১০ · AI-এর যুগে — চলছে দেখেই বিশ্বাস নয়

AI খুব দ্রুত React component লিখে দেয়, আর সেগুলো সাধারণত চলেও। সমস্যা হলো, state-এর বাগ প্রথম চালানোয় দেখা যায় না। দ্রুত দুবার ক্লিক, ধীর নেটওয়ার্ক বা দ্বিতীয় আপডেটে তা বের হয়। তাই “চলছে” এই পর্বের বিষয়ে কোনো প্রমাণই নয়।

AI-এর লেখা React কোড হাতে পেলে

• প্রতিটি useState-এর সামনে জিজ্ঞেস করেছি: এটি কি বাকিগুলো থেকে হিসাব করা যায়?
• push, splice, sort, reverse আর obj.x = খুঁজে দেখেছি, কারণ linter সব ধরে না
• আগের মান থেকে হিসাবের প্রতিটি জায়গায় updater আছে কি না দেখেছি
• দ্রুত দুবার ক্লিক করে দেখেছি, আর DevTools-এর ধীর নেটওয়ার্কে চালিয়েছি
• flushSync বা নতুন package থাকলে কারণ জেনেছি, আর React-এর নিজের নথিতে মিলিয়েছি
• Diff পড়েছি, আর কোনো secret বা দামের হিসাব client-এ রয়ে যায়নি

useEffect(() => {
  const id = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(id);
}, []);