State কোথায় রাখবেন — local, lifted, global আর server state

১ · সব state এক জাতের নয়

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

তথ্যের জাত আলাদা, তাই রাখার জায়গাও আলাদা। React অ্যাপেও ঠিক তাই। পর্ব ১০-এ আপনি useState দিয়ে state শিখেছেন, আর পর্ব ১২-এ form. কিন্তু অ্যাপ বড় হলে আসল প্রশ্ন আর “কীভাবে” থাকে না, হয়ে যায় “কোথায়”। আগে জাতগুলো চিনে নিন।

২ · Colocation — যার দরকার তার কাছে রাখুন

রান্নাঘরের লবণ রান্নাঘরেই থাকে, বসার ঘরের আলমারিতে নয়। State-এরও একই নিয়ম। Colocation মানে একটি state-কে সেই component-এর যত কাছে সম্ভব রাখা, যে সেটি ব্যবহার করে। এতে তিনটি লাভ: কোড পড়া সহজ, component মুছলে state-ও মুছে যায়, আর অন্য component অকারণে render হয় না।

কিন্তু দুটি component-এর একই তথ্য লাগলে? তখন পর্ব ১০-এর lifting state up: state তুলে নিন দুজনের সবচেয়ে কাছের সাধারণ parent-এ। এটি ঠিক পথ, তবে তিনটি জায়গায় ব্যথা শুরু হয়।

এক নিয়মে মনে রাখুন: তুলুন ঠিক ততটুকু, যতটুকু দরকার। আর কোনো state আর ভাগ করার দরকার না থাকলে, আবার নামিয়ে দিন। নামানোও একটি স্বাভাবিক refactor. নিচের live ব্লকে একই কুপন ঘর দুই জায়গায় রাখা হয়েছে। দুই বাক্সে EID লিখে নিচের আউটপুট দেখুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const names = ['চাল', 'ডাল', 'তেল'];
const count = { high: 0, low: 0 };
function Card({ name, side }) {
  count[side]++;                         // প্রতি render-এ এক বাড়ে
  return <li>{name}</li>;
}
function Coupon({ code, setCode }) {
  return <input placeholder="কুপন" value={code} onChange={e => setCode(e.target.value)} />;
}
function HighShop() {                    // state ওপরের দোকান component-এ
  const [code, setCode] = useState('');
  useEffect(() => console.log('high code=' + code, 'Card renders:', count.high));
  return <section><b>state ওপরে</b> <Coupon code={code} setCode={setCode} />
    <ul>{names.map(n => <Card key={n} name={n} side="high" />)}</ul></section>;
}
function LocalCoupon() {                 // state শুধু যার দরকার তার কাছে
  const [code, setCode] = useState('');
  useEffect(() => console.log('low  code=' + code, 'Card renders:', count.low));
  return <Coupon code={code} setCode={setCode} />;
}
function LowShop() {
  return <section><b>state নিচে</b> <LocalCoupon />
    <ul>{names.map(n => <Card key={n} name={n} side="low" />)}</ul></section>;
}
createRoot(document.getElementById('root')).render(<><HighShop /><LowShop /></>);
</script>

high code= Card renders: 3
low  code= Card renders: 3
high code=E Card renders: 6
high code=EI Card renders: 9
high code=EID Card renders: 12
low  code=E Card renders: 3
low  code=EI Card renders: 3
low  code=EID Card renders: 3

৩ · ওপরের state-এর দাম — হিসাব করে দেখুন

এবার গণনাটি ধাপে ধাপে দেখুন। গাছটি এমন: App-এর নিচে Header, Coupon আর ProductList, আর তার নিচে ৩টি Card. প্রথমে state আছে App-এ, পরে সেটি নামবে Coupon-এ। “পরে” চেপে সংখ্যাগুলো দেখুন।

function App() {
  const [code, setCode] = useState('');
  return <>
    <Header />
    <Coupon code={code} setCode={setCode} />
    <ProductList />
  </>;
}

function App() {
  return <>
    <Header />
    <Coupon />
    <ProductList />
  </>;
}
function Coupon() {
  const [code, setCode] = useState('');
  return <input value={code} onChange={...} />;
}

হিসাবটি সূত্রে

ধরুন state যে component-এ আছে, তার নিচে মোট Sটি component. তাহলে এক অক্ষরে render হয় S + 1টি, আর k অক্ষরে k × (S + 1)টি। প্রতিটি গড়ে t মিলিসেকেন্ড নিলে এক অক্ষরের খরচ (S + 1) × t. Frame budget মনে রাখুন: 60 fps-এ এক frame পায় 1000 ÷ 60 ≈ 16.7 ms, আর তার ভেতরেই style, layout আর paint-ও হতে হয়।

এবার মাপা ফল। ২০০০টি সরল Card-এর তালিকায় এক অক্ষরের commit-এর সময় মাপা হলো। সত্যিকারের run: production React 19, Edge, Playwright, প্রতিটি ক্ষেত্রে ৫০ বার। CPU-কে ৪ গুণ ধীর করে কম দামি ফোনের কাছাকাছি একটি অবস্থাও দেখা হলো।

cpu x1 high median 1.55 ms  max 3.00 ms
cpu x1 low  median 0.00 ms  max 0.10 ms
cpu x4 high median 6.50 ms  max 12.30 ms
cpu x4 low  median 0.00 ms  max 0.30 ms

এটি একটি যন্ত্রে একবারের মাপ, সাধারণ ফল নয়। এখানে timer-এর সূক্ষ্মতা প্রায় 0.1 ms, তাই 0.00 মানে “মাপার সীমার নিচে”, শূন্য নয়। দুটি শিক্ষা নিন। এক: ২০০০টি সরল Card-ও এই যন্ত্রে budget-এর ভেতরেই ছিল। তাই শুধু re-render গুনে ভয় পাবেন না। দুই: ধীর CPU-তে সবচেয়ে খারাপ মান 12.3 ms-এ উঠেছে, অথচ Card-গুলো ছিল খুব হালকা। ছবি, দাম হিসাব আর chart থাকলে খরচ আরও বাড়তে পারে। State নামানোর আসল কারণ তাই আগে পরিষ্কার কোড, তারপর গতি।

৪ · Derived state — এক তথ্য, এক ঠিকানা

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

এটাই derived state-এর মূল কথা। পর্ব ১০-এ পাঁচ নিয়ম দেখেছেন, আর পর্ব ১৩-এ দেখেছেন এর জন্য Effect লাগে না। এখানে কথাটি নকশার। প্রতিটি তথ্যের একটি single source of truth থাকবে, বাকি সব সেখান থেকে হিসাব হবে। নিচের কার্টে “চাল আরেকটি”, “চালের দাম ৳70”, আবার “চাল আরেকটি” চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const start = [{ id: 'rice', name: 'চাল', qty: 2, price: 80 }, { id: 'dal', name: 'ডাল', qty: 1, price: 140 }];
function Cart() {
  const [items, setItems] = useState(start);
  const [savedTotal, setSavedTotal] = useState(300);          // কপি: ভুলের উৎস
  const total = items.reduce((sum, i) => sum + i.qty * i.price, 0); // derived
  useEffect(() => console.log('copy:', savedTotal, ' derived:', total));
  function addRice() {
    const rice = items.find(i => i.id === 'rice');
    setItems(items.map(i => i === rice ? { ...i, qty: i.qty + 1 } : i));
    setSavedTotal(savedTotal + rice.price);                   // মনে করে বদলালাম
  }
  function priceDrop() {
    setItems(items.map(i => i.id === 'rice' ? { ...i, price: 70 } : i));
    // এখানে setSavedTotal ডাকতে ভুলে গেলাম
  }
  return <div>
    <ul>{items.map(i => <li key={i.id}>{i.name}: {i.qty} × ৳{i.price}</li>)}</ul>
    <button onClick={addRice}>চাল আরেকটি</button>
    <button onClick={priceDrop}>চালের দাম ৳70</button>
    <p>কপি করা মোট: ৳{savedTotal}</p>
    <p><b>Derived মোট: ৳{total}</b></p>
  </div>;
}
createRoot(document.getElementById('root')).render(<Cart />);
</script>

copy: 300  derived: 300
copy: 380  derived: 380
copy: 380  derived: 350
copy: 450  derived: 420

Duplicate-এর আরও দুটি পরিচিত চেহারা আছে। এক: prop-কে state-এ কপি করা, যেমন useState(price). Parent দাম বদলালেও এই state বদলায় না, কারণ initial মান শুধু প্রথম render-এ পড়া হয়। দুই: তালিকার পুরো object কপি করা। selectedProduct না রেখে শুধু selectedId রাখুন, আর render-এ find করুন। হিসাব সত্যিই ভারী হলে পর্ব ১৪-এর useMemo আছে, কিন্তু সেটিও জমা রাখা নয়, হিসাবের cache মাত্র।

৫ · URL-ও state — লিংকেই পুরো অবস্থা

রিকশাওয়ালাকে পুরো ঠিকানা বললে যে কেউ একই জায়গায় পৌঁছায়। URL ঠিক তেমন একটি ঠিকানা। ধরুন বাজারঘরে একজন “তেল, দামে কম থেকে বেশি, পাতা ৩” বেছে বন্ধুকে লিংক পাঠালেন। Filter যদি শুধু useState-এ থাকে, বন্ধু দেখবেন প্রথম পাতার সাধারণ তালিকা। Refresh দিলে আপনিও তাই দেখবেন। আর filter যদি query string-এ থাকে, লিংকটিই পুরো অবস্থা বহন করে।

/products?cat=oil&sort=price&page=3

এর সাথে বিনা খরচে পাওয়া যায় চারটি সুবিধা: refresh-এ অবস্থা থাকে, Back বোতাম কাজ করে, deep link শেয়ার করা যায়, আর bookmark করা যায়। নিচের ব্লকে address bar-এর একটি নকল আছে, কারণ sandbox-এ আসল URL বদলানো যায় না। লক্ষ করুন, cat আর page-এর জন্য আলাদা useState নেই। সবই URL থেকে হিসাব হচ্ছে। “পরের পাতা”, “তেল”, “লিংক পাঠান”, আবার “পরের পাতা” আর “Back” চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const all = [['মিনিকেট', 'rice'], ['নাজিরশাইল', 'rice'], ['চিনিগুঁড়া', 'rice'], ['সয়াবিন', 'oil'], ['সরিষা', 'oil']];
function Shop({ start, label, onShare }) {
  const [stack, setStack] = useState([start]);           // address bar-এর নকল
  const url = stack.at(-1), query = new URLSearchParams(url.split('?')[1]); // URL থেকেই পড়া
  const cat = query.get('cat') ?? 'rice';
  const page = Number(query.get('page') ?? 1);
  const rows = all.filter(p => p[1] === cat).slice((page - 1) * 2, page * 2).map(p => p[0]);
  useEffect(() => console.log(label, url, '=>', rows.join(', ') || '(empty)'), [url]);
  function go(change) {
    const next = new URLSearchParams(query);
    for (const k in change) next.set(k, change[k]);
    setStack([...stack, '/products?' + next]);
  }
  return <div><p><b>{label}:</b> <code>{url}</code></p>
    <button onClick={() => go({ cat: 'oil', page: 1 })}>তেল</button>
    <button onClick={() => go({ page: page + 1 })}>পরের পাতা</button>
    <button disabled={stack.length < 2} onClick={() => setStack(stack.slice(0, -1))}>Back</button>
    {onShare && <button onClick={() => onShare(url)}>লিংক পাঠান</button>}
    <p>{rows.join(', ') || 'কিছু নেই'}</p></div>;
}
function App() {
  const [link, setLink] = useState(null);
  return <><Shop start="/products?cat=rice&page=1" label="me" onShare={setLink} />
    {link && <Shop key={link} start={link} label="friend" />}</>;
}
createRoot(document.getElementById('root')).render(<App />);
</script>

me /products?cat=rice&page=1 => মিনিকেট, নাজিরশাইল
me /products?cat=rice&page=2 => চিনিগুঁড়া
me /products?cat=oil&page=1 => সয়াবিন, সরিষা
friend /products?cat=oil&page=1 => সয়াবিন, সরিষা
me /products?cat=oil&page=2 => (empty)
me /products?cat=oil&page=1 => সয়াবিন, সরিষা

আসল অ্যাপে address bar পড়া ও বদলানোর কাজ করে router. React Router-এ useSearchParams আছে, লেখার সময়ে version 8.5.1. পুরোটা শিখবেন পর্ব ২০-এ, এখানে শুধু আকারটি দেখুন। এটি উদাহরণ, এখানে চালানো হয়নি।

import { useSearchParams } from 'react-router';

function ProductsPage() {
  const [params, setParams] = useSearchParams();
  const cat = params.get('cat') ?? 'all';
  const pick = (next) => setParams((old) => {
    old.set('cat', next);
    old.set('page', '1');   // filter বদলালে প্রথম পাতায়
    return old;
  });
  // ...
}

৬ · Server state আলাদা — আর সিদ্ধান্তের ছক

তাকে সাজানো ডালের প্যাকেট গুদামের হিসাবের একটি ছায়া। গুদামে শেষ হয়ে গেলেও তাক তা জানে না। Server থেকে আনা পণ্যের তালিকাও তাই। সেটি আপনার মালিকানায় নেই, অন্য কেউ যেকোনো সময় বদলাতে পারে। তাই একে useState বা global store-এ “আমার state” ভেবে রাখা একটি মৌলিক ভুল। এটি আসলে একটি cache.

এই আলাদা করার ফল বড়। অনেক অ্যাপের global store-এর একটি বড় অংশ আসলে server ডেটা। সেটি সরিয়ে দিলে store প্রায়ই ছোট হয়ে যায়। Cache-এর তত্ত্ব আছে System Design কোর্সে, আর বাজারঘরে এর ব্যবহার পাবেন পর্ব ১৯-এ।

এক টুকরো state-এর জায়গা ঠিক করা

এবার সব মিলিয়ে একটি প্রশ্নমালা। ওপর থেকে নিচে যান, প্রথম “হ্যাঁ”-তেই থামুন। নিচে বাজারঘরের category filter-কে এই পথে হাঁটানো হয়েছে।

selected category = ?   // ব্যবহারকারীর বাছাই
কিছু থেকে হিসাব হয় না, তাই এটি আসল state

category-র তালিকা      -> server-এর
কোনটি বেছেছেন          -> ব্যবহারকারীর

refresh দিলে থাকবে?    হ্যাঁ, থাকা উচিত
লিংকে পাঠানো যাবে?     হ্যাঁ, থাকা উচিত

const cat = params.get('cat') ?? 'all';
// যে component-এর লাগবে, সে নিজেই পড়বে

URL  ->  cat = oil  ->  GET /api/products?cat=oil
                        ফল থাকে server cache-এ

৭ · Prop, Context, Zustand না Redux

State ওপরে উঠে দূরে পৌঁছাতে হলে পথ চারটি। এগুলো শত্রু নয়, একটি সিঁড়ির ধাপ। নিচের ধাপে কাজ চললে ওপরে উঠবেন না। প্রতিটির API-র গভীরে যাবেন পর্ব ১৭ আর ১৮-এ। এখানে শুধু বেছে নেওয়ার যুক্তি।

লেখার সময়ে Zustand 5.0.16 আর Redux Toolkit 2.13.0. Context কোনো state রাখার যন্ত্র নয়, শুধু মান পৌঁছে দেওয়ার পথ। State থাকে useState বা useReducer-এ। Context-এর বড় কথাটি হলো, Provider-এর মান বদলালে সব consumer আবার render হয়, মানের যে অংশটি সে পড়ে তা না বদলালেও। তাই ঘন ঘন বদলানো state-এ এটি মানায় না।

৮ · State machine — অসম্ভব অবস্থা বাদ দিন

Checkout-এ এমন state প্রায়ই দেখা যায়: isLoading, isPaid, hasError. তিনটি boolean মানে ২×২×২ = ৮টি সম্ভাব্য মিলন। অথচ বৈধ অবস্থা মাত্র কয়েকটি। isLoading আর isPaid একসাথে সত্য হলে পর্দায় কী দেখাবে? এমন impossible state ঠেকানোর দায় আপনার ওপর পড়ে। React docs-ও এজন্য বেশ কয়েকটি boolean-এর বদলে একটি status রাখতে বলে।

ঢাকার মেট্রোর গেট ভাবুন। কার্ড ছোঁয়ালে “বন্ধ” থেকে “খোলা”, পার হলে আবার “বন্ধ”। “খোলা” অবস্থায় আবার ছোঁয়ালে কিছু হয় না। State machine হলো ঠিক এই ধারণা: নির্দিষ্ট কয়েকটি অবস্থা, প্রতিটিতে নির্দিষ্ট কিছু ঘটনা, আর একটি টেবিল। টেবিলে না থাকলে ঘটনাটি উপেক্ষিত। নিচে বাজারঘরের checkout. দুবার “Pay” চাপলে কী হয়, দেখুন।

1cart:    { NEXT: address }2address: { NEXT: payment, BACK: cart }3payment: { PAY: paying, BACK: address }4paying:  { OK: success, FAIL: failed }5failed:  { RETRY: payment }6success: { }

এবার একই টেবিল সত্যিকারের React-এ, মাত্র একটি useState আর একটি pure function দিয়ে। কোনো library নেই। Render-এর শর্তগুলো দেখুন, boolean-এর জট নেই।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const machine = {                 // কোন অবস্থায় কোন ঘটনা বৈধ, পুরোটা এক টেবিলে
  cart:    { NEXT: 'address' },
  address: { NEXT: 'payment', BACK: 'cart' },
  payment: { PAY: 'paying', BACK: 'address' },
  paying:  { OK: 'success', FAIL: 'failed' },
  failed:  { RETRY: 'payment' },
  success: {},
};
const events = ['NEXT', 'BACK', 'PAY', 'OK', 'FAIL', 'RETRY'];
// pure function: টেবিলে না থাকলে অবস্থা একই
const step = (state, event) => machine[state][event] ?? state;
function Checkout() {
  const [state, setState] = useState('cart');
  function send(event) {
    const to = step(state, event);
    console.log(state, '+', event, '->', to, to === state ? '(ignored)' : '');
    setState(to);
  }
  return <div><p>অবস্থা: <b>{state}</b></p>
    {events.map(e => <button key={e} onClick={() => send(e)}>{e}</button>)}
    {state === 'paying' && <p>পেমেন্ট হচ্ছে, অপেক্ষা করুন…</p>}
    {state === 'failed' && <p>পেমেন্ট হয়নি। আবার চেষ্টা করুন।</p>}
    {state === 'success' && <p>অর্ডার হয়েছে।</p>}</div>;
}
console.log('start: cart');
createRoot(document.getElementById('root')).render(<Checkout />);
</script>

start: cart
cart + PAY -> cart (ignored)
cart + NEXT -> address
address + NEXT -> payment
payment + PAY -> paying
paying + PAY -> paying (ignored)
paying + BACK -> paying (ignored)
paying + FAIL -> failed
failed + RETRY -> payment
payment + PAY -> paying
paying + OK -> success
success + NEXT -> success (ignored)

ছোট টেবিলে এটুকুই যথেষ্ট। বড় flow-তে, যেমন সময়সীমা, একসাথে চলা অংশ, আর আগে থেকে চিত্র আঁকা দরকার হলে XState-এর মতো library কাজে আসতে পারে। তবে এটি নতুন একটি dependency আর শেখার বিষয়, তাই সাধারণ form-এ সাধারণত দরকার পড়ে না। নিচে একই machine XState 5.33.3-এ, Node-এ সত্যিকারের run (node checkout.mjs).

import { createMachine, createActor } from 'xstate';

const checkout = createMachine({
  id: 'checkout',
  initial: 'cart',
  states: {
    cart:    { on: { NEXT: 'address' } },
    address: { on: { NEXT: 'payment', BACK: 'cart' } },
    payment: { on: { PAY: 'paying', BACK: 'address' } },
    paying:  { on: { OK: 'success', FAIL: 'failed' } },
    failed:  { on: { RETRY: 'payment' } },
    success: { type: 'final' },
  },
});
const actor = createActor(checkout);
actor.start();
// ... প্রতিটি ঘটনা actor.send({ type }) দিয়ে পাঠিয়ে ছাপা হলো

cart     + NEXT  -> address
address  + NEXT  -> payment
payment  + PAY   -> paying
paying   + PAY   -> paying  (ignored)
paying   + FAIL  -> failed
failed   + RETRY -> payment
payment  + PAY   -> paying
paying   + OK    -> success
status: done

ওপরের stepper-এর আট ধাপ আর এই আট লাইন হুবহু মেলে। শেষের status: done এসেছে type: 'final' থেকে, যা আমাদের হাতে লেখা টেবিলে ছিল না।

৯ · localStorage-এর ঝুঁকি আর বাজারঘরের পুরো মানচিত্র

Guest কার্ট tab বন্ধের পরও রাখতে চাইলে সবচেয়ে সহজ পথ localStorage. পর্ব ১৪-এ useLocalStorage লিখেছেন, আর API-র বিস্তার আছে JavaScript কোর্সে। কিন্তু persistence মানেই state এখন আপনার কোডের নতুন version-এর চেয়ে বেশি দিন বাঁচে। সবচেয়ে চুপচাপ ঝুঁকিটি এখানেই। ধরুন পুরোনো release কার্ট রেখেছিল ['rice', 'dal'] আকারে। নতুন কোড চায় { id, qty, price }. নিচে Zustand-এর persist দিয়ে সত্যিকারের run, Node-এ, Map-ভিত্তিক একটি নকল storage-এ।

const total = (s) => s.items.reduce((sum, i) => sum + i.qty * i.price, 0);

// ... naive অংশ আর ছাপার লাইন এখানে ছোট করা হলো
// ২: version 2, migrate পুরোনো আকারকে নতুন আকারে আনে
const safe = createStore()(persist(() => ({ items: [] }), {
  name: 'cart', version: 2, storage: createJSONStorage(() => memory),
  migrate: (old, from) => from < 2
    ? { items: old.items.map((id) => ({ id, qty: 1, price: 0 })) }
    : old,
}));

$ node persist.mjs
naive items: ["rice","dal"]
naive total: NaN
migrate from version 1
safe items: [{"id":"rice","qty":1,"price":0},{"id":"dal","qty":1,"price":0}]
safe total: 0
saved: {"state":{"items":[{"id":"rice","qty":1,"price":0},{"id":"dal","qty":1,"price":0}]},"version":2}

naive অংশে version বদলানো হয়নি, migrate-ও নেই। কোনো error আসেনি, পর্দায় শুধু মোট NaN. Zustand-এর docs-ও জানায়, createJSONStorage পড়ার সময় ডেটা যাচাই করে না। safe-এ version বাড়িয়ে পুরোনো আকারকে নতুন আকারে আনা হয়েছে। price: 0 দেখে অবাক হবেন না। দাম এখানে রাখা হয়নি, কারণ দামের মালিক server. বাকি ঝুঁকিগুলো এক নজরে:

• গোপন তথ্য নয়: একই origin-এর যেকোনো script localStorage পড়তে পারে। তাই XSS হলে সবই বেরিয়ে যায়। Token রাখার আলোচনা আছে Cybersecurity কোর্সে আর পর্ব ৪৬-এ।
• বিশ্বাস নয়: ব্যবহারকারী DevTools-এ মান বদলাতে পারেন। দাম, ছাড় বা stock সব server আবার হিসাব করবে।
• Server-এ নেই: SSR-এর সময় localStorage থাকে না, তাই প্রথম HTML আর ব্রাউজারের মান না মিললে hydration mismatch হতে পারে (পর্ব ৫৬)।
• সীমা ও ব্যর্থতা: শুধু string রাখে, কাজ করে synchronous-ভাবে, জায়গা সীমিত, আর setItem error ছুড়তে পারে। তাই try/catch রাখুন।
• একাধিক tab আর শেয়ার করা কম্পিউটার: অন্য tab-এর বদল জানতে storage event শুনতে হয়। Logout-এ ব্যক্তিগত ডেটা মুছুন।

বাজারঘরের state মানচিত্র

এবার পুরো ছবি। প্রতিটি তথ্য নিজের জায়গায়, আর একটি তথ্যের একটিই আসল ঠিকানা।

১০ · AI-এর যুগে state-এর নকশা

AI একটি useCartStore কয়েক সেকেন্ডে লিখে দেয়, কোডটি চলেও। কিন্তু “কোথায় রাখবেন” প্রশ্নটি অ্যাপের জীবনচক্রের, আর AI আপনার অ্যাপের পুরো ছবি দেখে না। তাই সাধারণ প্রশ্নে সে পরিচিত নকশাই দেয়।

AI-এর দেওয়া state নকশা হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি store-field-এর পাশে মালিকের নাম বলতে পারি
• Filter বদলে refresh দিয়েছি, লিংক অন্য tab-এ খুলেছি, Back চেপেছি
• DevTools-এর Application প্যানেলে localStorage খুলে দেখেছি, কোনো token বা গোপন মান নেই
• পুরোনো আকারের সংরক্ষিত ডেটা বসিয়ে পাতা খুলেছি, NaN বা crash হয়নি
• React DevTools Profiler-এ টাইপের সময় কে কে render হচ্ছে দেখেছি
• ব্যবহৃত API আমার version-এর অফিসিয়াল docs-এ মিলিয়েছি, আর diff পড়েছি