List, key আর শর্তসাপেক্ষ UI

১ · একটি array, অনেকগুলো সারি: map

“বাজারঘর”-এ পণ্য আছে পাঁচটি, কাল হবে পাঁচশো। হাতে পাঁচশোটি <li> কেউ লিখবে না। আমরা পণ্যকে data হিসেবে রাখি, আর একটি নিয়ম লিখি: “প্রতিটি পণ্যের জন্য একটি সারি।” JavaScript-এ এই কাজের টুল map. এটি একটি array নিয়ে সমান দৈর্ঘ্যের নতুন array ফেরত দেয়। পর্ব ০৮-এ JSX দেখেছেন; JSX element-ও একটি সাধারণ মান, তাই map থেকে সেটি ফেরত দেওয়া যায়।

function ProductList({ products }) {
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

JSX-এর { }-এর ভেতরে element-এর array রাখলে React প্রতিটিকে পরপর সন্তান হিসেবে আঁকে। for লুপ JSX-এর ভেতরে চলে না, কারণ { }-এ শুধু মান দেয় এমন expression বসে, statement নয়। map মান দেয়, তাই এখানে সে-ই স্বাভাবিক পছন্দ।

২ · key আসলে কী চিনিয়ে দেয়

পর্ব ১০-এ দেখেছেন, state বদলালে component আবার render হয়, আর React নতুন বর্ণনাকে পুরোনোটির সাথে মেলায়। এই মেলানোর কাজের নাম reconciliation; পর্ব ১৫-এ এর ভেতরটা দেখবেন। এখানে প্রশ্ন একটাই: নতুন list-এর তিন নম্বর সারি কি পুরোনো list-এর তিন নম্বর সারিই, নাকি অন্য কেউ?

key তিনটি জিনিস ঠিক করে: কোন সারি থেকে গেল, কোনটি সরল, আর কোনটি নতুন বা বাদ পড়ল। থেকে যাওয়া সারির state, DOM node আর input-এর লেখা বেঁচে থাকে। বাদ পড়া সারির সব মুছে যায়।

key-এর নিয়মগুলো

• ভাইবোনদের মধ্যে অনন্য। একই array-তে দুটি একই key চলে না। দুটি আলাদা list-এ একই key থাকতে বাধা নেই, কারণ key শুধু নিজের parent-এর ভেতরে অর্থ রাখে।
• স্থায়ী। একই জিনিসের key পরের render-এও একই থাকবে। Render-এর সময়ে নতুন করে বানালে key-এর উদ্দেশ্যই নষ্ট।
• সবচেয়ে বাইরের element-এ। map যে element ফেরত দেয়, key সেখানে বসে; ভেতরের <li>-তে নয়।
• Component-এর হাতে আসে না। key props-এর মধ্যে পৌঁছায় না, এটি শুধু React-এর জন্য ইঙ্গিত। Component-এর id লাগলে আলাদা করে পাঠাতে হয়: <Row key={p.id} id={p.id} />.

Key না দিলে React কী বলে? নিচে Vite dev server-এ চালানো একটি ছোট প্রজেক্টের ব্রাউজার console. সত্যিকারের run, React 19.3.1, Vite 8.3.5 (লেখার সময়ে):

Each child in a list should have a unique "key" prop.

Check the render method of `ProductList`. See https://react.dev/link/warning-keys for more information.

দুটি সারিকে একই key দিলে বার্তা বদলায়:

Encountered two children with the same key, `x`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

দুটি বার্তাই আসে development build থেকে। Production build-এ এগুলো থাকে না। এই পাতার live block-গুলোও production build-এ চলে, তাই এখানে key মুছলে কোনো warning পাবেন না। নিজের প্রজেক্টে দেখতে হবে dev server-এ, অথবা linter-এ। সত্যিকারের run, Oxlint 1.90.0:

$ npx oxlint --react-plugin -D react/jsx-key \
    -D react/no-array-index-key src/ProductList.jsx
src/ProductList.jsx:9:17: error react(jsx-key): Missing "key" prop
  for element in iterator. …
src/ProductList.jsx:25:35: error react(no-array-index-key): Usage of
  Array index in keys is not allowed …

এই run-এ একটি কথা মনে রাখার মতো: একই ফাইলের key="x"-এর ভুলটি linter ধরেনি, ধরেছিল শুধু dev console. একটি টুলে পাস করলেই ভুল নেই, এমন নয়।

৩ · Index-কে key করলে কী ভাঙে

Key না দিলে React নিজেই index ব্যবহার করে। key={i} লিখলে warning চলে যায়, কিন্তু আচরণ একই থাকে। মানে warning বন্ধ হলো, বাগ রয়ে গেল। নিচের ব্লকে একই তিনটি পণ্য দুই রকম key দিয়ে আঁকা আছে। প্রতিটি input-এ শুরুর লেখাটি শুধু একবার বসে, তারপর সেটি DOM-এর নিজের জিনিস। “তালিকা উল্টান” চেপে দেখুন, ইচ্ছা হলে আগে কোনো input-এ কিছু লিখে নিন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const start = [
  { id: 'p1', name: 'চাল', qty: '5 কেজি' },
  { id: 'p2', name: 'ডাল', qty: '2 কেজি' },
  { id: 'p3', name: 'তেল', qty: '1 লিটার' },
];
function Row({ item }) {
  return <li>{item.name}: <input defaultValue={item.qty} size="8" /></li>;
}
function App() {
  const [items, setItems] = useState(start);
  useEffect(() => {
    document.querySelectorAll('ul').forEach((ul, n) => console.log(n ? 'id   :' : 'index:',
      [...ul.children].map(li => li.textContent + li.firstElementChild.value).join(' / ')));
  }, [items]);
  return (
    <div>
      <button onClick={() => setItems([...items].reverse())}>তালিকা উল্টান</button>
      <h4>key = index</h4>
      <ul>{items.map((item, i) => <Row key={i} item={item} />)}</ul>
      <h4>key = id</h4>
      <ul>{items.map(item => <Row key={item.id} item={item} />)}</ul>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

index: চাল: 5 কেজি / ডাল: 2 কেজি / তেল: 1 লিটার
id   : চাল: 5 কেজি / ডাল: 2 কেজি / তেল: 1 লিটার
index: তেল: 5 কেজি / ডাল: 2 কেজি / চাল: 1 লিটার
id   : তেল: 1 লিটার / ডাল: 2 কেজি / চাল: 5 কেজি

কেন এমন হলো? নিচের ধাপগুলো দুটি পণ্য নিয়ে একই ঘটনা ধীরে দেখায়। প্রতিটি ধাপে খেয়াল করুন, input-টি (A বা B) কার সাথে জোড়া থাকছে।

items: [চাল(p1), ডাল(p2)]

key 0 → লেবেল “চাল”  → input A: 5 কেজি
key 1 → লেবেল “ডাল”  → input B: 2 কেজি

items: [ডাল(p2), চাল(p1)]

key 0 → নতুন data: ডাল
key 1 → নতুন data: চাল

আগের key 0 ↔ নতুন key 0: মিলেছে, input A থাকবে
আগের key 1 ↔ নতুন key 1: মিলেছে, input B থাকবে

বদলাবে শুধু লেবেলের লেখা

key 0 → লেবেল “ডাল”  → input A: 5 কেজি   ✗ ডাল ছিল 2
key 1 → লেবেল “চাল”  → input B: 2 কেজি   ✗ চাল ছিল 5

items: [চাল(p1), ডাল(p2)]

key p1 → লেবেল “চাল”  → input A: 5 কেজি
key p2 → লেবেল “ডাল”  → input B: 2 কেজি

items: [ডাল(p2), চাল(p1)]

নতুন প্রথম সারি key p2 ↔ আগের key p2: input B
নতুন দ্বিতীয় সারি key p1 ↔ আগের key p1: input A

DOM node দুটির ক্রম বদলাবে

key p2 → লেবেল “ডাল”  → input B: 2 কেজি   ✓
key p1 → লেবেল “চাল”  → input A: 5 কেজি   ✓

Filter করলেও একই বাগ হয়, কারণ মাঝের সারি বাদ পড়লে পরের সবার index এক ঘর কমে। শুরুতে নতুন সারি যোগ করলে সবার index বাড়ে। তবে index সব সময়ে অপরাধী নয়। তিনটি শর্ত একসাথে মিললে এটি নিরাপদ: list কখনো সাজানো, ছাঁকা বা মাঝখানে যোগ-বিয়োগ হয় না; সারিতে নিজস্ব state নেই; আর সারিতে input বা অন্য DOM state নেই। যেমন ফুটারের স্থির লিংকের তালিকা।

স্থায়ী id কোথা থেকে আসবে

Math.random()-এর ক্ষতি মেপে দেখেছি। সত্যিকারের run (React 19.3.1, Edge): input-এ abc লিখে পাশের একটি বোতাম চাপা হলো, যা শুধু একটি counter state বাড়ায়। Render-এর পরে সেই input-এর মান হলো খালি। কারণ নতুন key মানে পুরোনো input মুছে নতুন input বসানো। Focus-ও সাথে সাথে হারিয়ে যায়।

৪ · Filter: state নয়, হিসাব করা মান

এবার “বাজারঘর”-এ search বসাই। নতুনদের প্রথম চিন্তা হয়: filteredProducts নামে আরেকটি state বানাই, আর search বদলালে সেটি আপডেট করি। এতে একই তথ্যের দুটি কপি হলো। কোনো একটি জায়গায় আপডেট ভুলে গেলেই পর্দা আর data আলাদা কথা বলবে।

নিয়মটি এই: যা অন্য state বা props থেকে হিসাব করা যায়, সেটি state-এ রাখার দরকার নেই। এমন মানকে বলে derived value. State থাকবে শুধু দুটি: খোঁজার লেখা আর category. বাকিটা প্রতি render-এ হিসাব হবে।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const products = [
  { id: 'p1', name: 'মিনিকেট চাল', cat: 'মুদি' },
  { id: 'p2', name: 'মসুর ডাল', cat: 'মুদি' },
  { id: 'p3', name: 'চায়ের কেটলি', cat: 'রান্নাঘর' },
  { id: 'p4', name: 'হাঁড়ি', cat: 'রান্নাঘর' },
  { id: 'p5', name: 'খাতা', cat: 'স্টেশনারি' },
];
const clean = s => s.normalize('NFC').trim().toLowerCase();
const cats = ['সব', ...new Set(products.map(p => p.cat))];
function Shop() {
  const [query, setQuery] = useState('');
  const [cat, setCat] = useState('সব');
  const visible = products.filter(p =>
    (cat === 'সব' || p.cat === cat) && clean(p.name).includes(clean(query)));
  console.log(`cat=${cat} query="${query}" -> ${visible.length}/${products.length}`);
  return <div>
    <input aria-label="পণ্য খুঁজুন" value={query} onChange={e => setQuery(e.target.value)} />
    {cats.map(c => <button key={c} aria-pressed={c === cat} onClick={() => setCat(c)}>{c}</button>)}
    <p role="status">{visible.length}টি পণ্য</p>
    {visible.length > 0
      ? <ul>{visible.map(p => <li key={p.id}>{p.name}</li>)}</ul>
      : <p>কিছু পাওয়া যায়নি। অন্য শব্দ লিখে দেখুন।</p>}
  </div>;
}
createRoot(document.getElementById('root')).render(<Shop />);
</script>

cat=সব query="" -> 5/5
cat=রান্নাঘর query="" -> 2/5
cat=রান্নাঘর query="চা" -> 1/5
cat=রান্নাঘর query="ঝ" -> 0/5

1const [cat, setCat] = useState('সব');2const [query, setQuery] = useState('');3const visible = products.filter(...);4return <List items={visible} />;

খরচ নিয়ে ভয় পাওয়ার আগে হিসাব করুন

“প্রতি render-এ filter চললে ধীর হবে না?” হিসাব করি। ধরুন ১০,০০০ পণ্য। প্রতিটি অক্ষর লিখলে ১০,০০০টি তুলনা, “চাল” তিন অক্ষরের মতো টাইপে ৩০,০০০. Sort করলে প্রায় n log₂ n = ১০,০০০ × ১৩.২৯ ≈ ১.৩৩ লাখ তুলনা। আধুনিক ব্রাউজারে সাধারণ তুলনায় এটি সাধারণত সমস্যা নয়। React-এর নথির পরামর্শও তাই: আগে মাপুন, ধীর প্রমাণ হলে তবে useMemo (পর্ব ১৪)। এটি কেবল হিসাব বাঁচায়; state-এ কপি রাখার যুক্তি কোনোভাবেই নয়। আর এক লাখ পণ্যের দোকানে সব পণ্য ব্রাউজারে আনাই ভুল: তখন filter হবে সার্ভারে, পর্ব ৩৪-এ দেখবেন।

৫ · Sort, grouping আর nested list

Sort-ও derived value. State-এ থাকবে শুধু “কোন কলাম, কোন দিকে”; সাজানো list হিসাব হবে। একটি ফাঁদ আছে: Array.prototype.sort মূল array-কেই বদলে দেয়। State বা props-কে সরাসরি sort করলে React-এর হাতের data বদলে যায়, যা পর্ব ১০-এর নিয়মের বাইরে। তাই আগে কপি করুন: [...rows].sort(...), অথবা নতুন array দেওয়া rows.toSorted(...).

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const rows = [
  { id: 'p1', name: 'চাল', price: 85, stock: 40 },
  { id: 'p2', name: 'ডাল', price: 140, stock: 12 },
  { id: 'p3', name: 'তেল', price: 190, stock: 25 },
  { id: 'p4', name: 'খাতা', price: 60, stock: 12 },
];
const cols = [['name', 'পণ্য'], ['price', 'দাম'], ['stock', 'মজুত']];
const compare = (a, b, k) => typeof a[k] === 'number' ? a[k] - b[k] : a[k].localeCompare(b[k], 'bn');
function Table() {
  const [sort, setSort] = useState({ key: 'price', dir: 1 });
  const sorted = [...rows].sort((a, b) => sort.dir * compare(a, b, sort.key));
  console.log(sort.key, sort.dir > 0 ? 'asc :' : 'desc:', sorted.map(r => r.id).join(' '));
  const toggle = key => setSort(s => ({ key, dir: s.key === key ? -s.dir : 1 }));
  const aria = k => sort.key !== k ? undefined : sort.dir > 0 ? 'ascending' : 'descending';
  return <table>
    <caption>বাজারঘরের মজুত</caption>
    <thead><tr>{cols.map(([k, label]) => <th key={k} scope="col" aria-sort={aria(k)}>
      <button onClick={() => toggle(k)}>{label}{sort.key === k && (sort.dir > 0 ? ' ▲' : ' ▼')}</button>
    </th>)}</tr></thead>
    <tbody>{sorted.map(r => <tr key={r.id}><td>{r.name}</td><td>{r.price}</td><td>{r.stock}</td></tr>)}</tbody>
  </table>;
}
createRoot(document.getElementById('root')).render(<Table />);
</script>

price asc : p4 p1 p2 p3
price desc: p3 p2 p1 p4
stock asc : p2 p4 p3 p1
stock desc: p1 p3 p2 p4

Grouping: category ধরে ভাগ

Group করাও হিসাব। Object.groupBy একটি array-কে category ধরে ভাগ করে। MDN অনুযায়ী এটি ২০২৪ সালের মার্চ থেকে সব বড় ব্রাউজারে আছে; খুব পুরোনো ফোন সমর্থন করতে হলে reduce বা Map ব্যবহার করুন। List-এর ভেতরে list হলে প্রতিটি স্তরে আলাদা key লাগে:

const groups = Object.groupBy(products, p => p.cat);

return Object.entries(groups).map(([cat, items]) => (
  <section key={cat}>
    <h3>{cat}</h3>
    <ul>
      {items.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  </section>
));

এখানে বাইরের key category, ভেতরের key পণ্য। দুই স্তরের key মিলে গেলেও সমস্যা নেই, কারণ key শুধু ভাইবোনদের মধ্যে অনন্য হলেই চলে। প্রতিটি উপাদান থেকে একাধিক সারি দরকার হলে Fragment লাগে, যেমন <dl>-এর <dt> আর <dd>. ছোট রূপ <>-এ key বসে না, তাই পুরো রূপ লিখতে হয়: <Fragment key={f.id}>.

ভেতরের list বড় হলে আলাদা component করুন: <CategoryBlock key={cat} items={items} />. কোড পড়া সহজ হয়, আর প্রতিটি অংশের নিজস্ব state থাকতে পারে, যেমন “ভাঁজ করা”। পর্ব ০৯-এর composition এখানেই কাজে লাগে।

৬ · শর্তসাপেক্ষ UI: &&, ternary না early return

“স্টকে থাকলে কিনুন বোতাম, না থাকলে ‘শেষ’ লেখা।” এই ধরনের কাজকে বলে conditional rendering. React-এ এর জন্য বিশেষ কোনো syntax নেই, সবই সাধারণ JavaScript (শর্ত আর truthy-falsy মনে করে নিন)। প্রশ্ন শুধু কোন রূপটি কোথায় পড়তে সহজ। নিচের ধাপগুলো সিদ্ধান্তের একটি ক্রম।

function ProductPage({ product }) {
  if (!product) return <p>পণ্যটি পাওয়া যায়নি।</p>;
  return <h1>{product.name}</h1>;
}

<p>
  {product.name}:
  {stock > 0 ? <button>কিনুন</button> : <b>শেষ</b>}
</p>

const count = 3;
{count > 0 && <Badge n={count} />}

পর্দায়: Badge, 3 দেখাচ্ছে
count 0 হলে: বাঁ পাশ false, পর্দায় কিছু নেই

const count = 0;
{count && <Badge n={count} />}

পর্দায়: 0

const badge = {
  paid: <b>পরিশোধিত</b>,
  pending: <b>অপেক্ষায়</b>,
  failed: <b>ব্যর্থ</b>,
};
return <p>{badge[order.status]}</p>;

{ }-এর ভেতরে কোন মান কী আঁকে, সেটি জানা থাকলে অনেক অবাক হওয়া বাঁচে। সত্যিকারের run, react-dom/server 19.3.1:

Component থেকে null ফেরত দেওয়া বৈধ, কিছুই আঁকা হবে না। তবে React-এর নথি বলে, এটি পড়তে গিয়ে অবাক করতে পারে। বেশির ভাগ সময়ে শর্তটি parent-এ রাখাই পরিষ্কার: {isAdmin && <AdminPanel />}. একটি বড় কথা মনে রাখুন: UI লুকানো নিরাপত্তা নয়। বোতাম না দেখালেও API খোলা থাকলে যে কেউ ডাকতে পারে। আসল যাচাই সার্ভারে, পর্ব ৪৮-এ দেখবেন।

৭ · Empty, loading, error: তিনটি অবস্থার অভ্যাস

নতুন developer শুধু “সব ঠিক আছে” অবস্থাটি বানান। অথচ আসল ব্যবহারকারী ধীর নেটওয়ার্কে থাকেন, সার্ভার মাঝে মাঝে ভাঙে, আর নতুন দোকানে পণ্যই থাকে না। তাই যেকোনো list বানানোর সময়ে নিজেকে চারটি প্রশ্ন করুন: আনার সময়ে কী দেখাবে? ব্যর্থ হলে? খালি হলে? ঠিক থাকলে?

এখন প্রশ্ন, এই অবস্থাগুলো কোথায় রাখবেন? সহজ চিন্তা হলো তিনটি boolean: isLoading, isError, isEmpty. হিসাব করি। তিনটি boolean মানে 2³ = ৮টি মিশ্রণ। বৈধ মাত্র ৪টি: সব false (সফল), অথবা ঠিক একটি true. বাকি ৪টি অসম্ভব অবস্থা, যেমন একই সাথে loading আর error. কোড ভুলে সেখানে চলে গেলে পর্দায় কী দেখাবে, কেউ জানে না। সমাধান একটি মান: status, যার ৪টি রূপ, ৪টিই বৈধ। পর্ব ০৬-এর discriminated union ঠিক এই ধারণাকেই type-এ বাঁধে।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const items = [{ id: 'p1', name: 'চাল' }, { id: 'p2', name: 'ডাল' }];
const statuses = ['loading', 'empty', 'error', 'success'];

function View({ status, onRetry }) {
  if (status === 'loading') return <p>পণ্য আনা হচ্ছে…</p>;
  if (status === 'error') return <p>পণ্য আনা যায়নি।
    <button onClick={onRetry}>আবার চেষ্টা করুন</button></p>;
  if (status === 'empty') return <p>এই দোকানে এখনো পণ্য নেই।</p>;
  return <ul>{items.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}
function App() {
  const [status, setStatus] = useState('loading');
  console.log('status =', status);
  return <div>
    {statuses.map(s => (
      <button key={s} aria-pressed={s === status} onClick={() => setStatus(s)}>{s}</button>
    ))}
    <div role="status">
      <View status={status} onRetry={() => setStatus('loading')} />
    </div>
  </div>;
}
createRoot(document.getElementById('root')).render(<App />);
</script>

status = loading
status = error
status = loading
status = empty
status = success

৮ · key দিয়ে component নতুন করে শুরু

Key শুধু list-এর জন্য নয়। React state মনে রাখে গাছের অবস্থান ধরে। ধরুন পণ্যের পাতায় একটি রিভিউ ফর্ম আছে। ব্যবহারকারী চালের রিভিউ অর্ধেক লিখে পাশের ডালে গেলেন। Component একই জায়গায় থাকায় React লেখাটি রেখে দেয়, আর চালের রিভিউ ডালের ফর্মে চলে আসে।

function ProductPage({ product }) {
  return (
    <>
      <h1>{product.name}</h1>
      <ReviewForm key={product.id} product={product} />
    </>
  );
}

এখন product.id বদলালে React দুটিকে আলাদা component ধরে। পুরোনোটির state আর DOM মুছে নতুনটি শুরু থেকে তৈরি হয়। এটি effect দিয়ে একটি একটি করে state খালি করার চেয়ে অনেক পরিষ্কার। React-এর ২০১৮ সালের ব্লগেও (“You Probably Don't Need Derived State”, Brian Vaughn) এই কৌশলকে বেশির ভাগ ক্ষেত্রে সেরা বলা হয়েছে।

এর খরচও আছে: পুরো গাছ নতুন করে তৈরি হয়, ভেতরের সব state আর focus যায়। তাই key-টি অর্থপূর্ণ কিছু হওয়া চাই, যেমন “এটি অন্য পণ্যের ফর্ম”। একটি কাজের রূপ: key={attempt}. ব্যর্থ একটি অংশ “আবার চেষ্টা” চাপলে attempt এক বাড়ালেই পুরোটা নতুন করে শুরু হয়।

৯ · লম্বা list আর সবার জন্য list

Virtualization: শুধু যা দেখা যায়

১০,০০০ সারি একসাথে DOM-এ রাখলে কী হয়? এক সারিতে ৪টি element (li, নাম, দাম, বোতাম) ধরে আমরা Edge-এ একটি production build মেপেছি। এটি এক মেশিনের স্থানীয় ফল, ৭ বারের মধ্যক (ধীর CPU-র ঘরে ৫ বারের); সাধারণ নিয়ম নয়। মাপে আছে শুধু React-এর render আর DOM-এ বসানো, layout আর paint নেই।

ধীর CPU-র ঘরটি দেখুন। ভালো INP-এর সীমা ২০০ ms, আর শুধু এই কাজেই ১৭৯ ms গেল। Virtualization-এর ধারণা সরল: যা পর্দায় দেখা যায় শুধু সেটুকু আঁকুন, বাকিটার জন্য খালি জায়গা রাখুন।

হিসাব: সারির উচ্চতা ৪০ px, দেখার জায়গা ৬০০ px, মোট ১০,০০০ সারি। দৃশ্যমান সারি ৬০০ ÷ ৪০ = ১৫. ওপরে-নিচে ৫টি করে বাড়তি সারি (overscan), যাতে দ্রুত scroll-এ ফাঁকা না দেখায়। মোট আঁকা হয় ১৫ + ৫ + ৫ = ২৫টি, মানে ১০১টি element, ৪০,০০১-এর জায়গায়। ভেতরের ফাঁকা ঘরের উচ্চতা ১০,০০০ × ৪০ = ৪,০০,০০০ px, যাতে scrollbar ঠিক দেখায়। ১,২০,০০০ px scroll করলে প্রথম দৃশ্যমান সারি ১,২০,০০০ ÷ ৪০ = ৩,০০০, আঁকা হয় ২,৯৯৫ থেকে ৩,০১৯.

হাতে লেখার দরকার সাধারণত হয় না। react-window (লেখার সময়ে 2.5.2) আর TanStack Virtual (@tanstack/react-virtual 3.14.25) দুটি পরিচিত উদাহরণ; API version ধরে বদলায়, তাই তাদের নথি দেখে নিন। লাইব্রেরি নেওয়ার আগে তিনটি প্রশ্ন করুন: সারি কি সত্যিই শত শত? Pagination (পর্ব ৩৪) বা CSS-এর content-visibility: auto-তে কি কাজ চলে? ব্যবহারকারী কি পাতায় Ctrl+F দিয়ে খোঁজেন? Virtualization-এ যে সারি আঁকা হয়নি, ব্রাউজারের খোঁজ সেটি পায় না। Screen reader-ও মোট সংখ্যা জানে না, যদি আপনি aria-setsize আর aria-posinset না দেন।

সবার জন্য list

Screen reader ব্যবহারকারী চোখে পাতা দেখেন না; তিনি শোনেন। আসল semantic HTML দিলে “list, ৫টি আইটেম” শোনা যায়। তার ওপর একটু যত্ন (ভিত্তি আছে accessibility আর list ও table পর্বে):

• আসল element: list-এ ul, ol, li; তুলনার data-য় table, caption, th scope. সব div দিলে গঠনের তথ্য হারায়।
• Bullet সরালে: Safari আর VoiceOver-এ list-style: none দিলে list হিসেবে না শোনাতে পারে, এমন আচরণ নথিবদ্ধ আছে। প্রয়োজনে role="list" দিয়ে নিজে পরীক্ষা করুন।
• ফলের সংখ্যা জানান: Filter বদলালে চোখে দেখা যায়, কানে শোনা যায় না। role="status" একটি polite live region. ঘরটি আগে থেকেই পাতায় থাকতে হয়, ভেতরের লেখা বদলালে তবেই নির্ভরযোগ্যভাবে শোনানো হয়।
• Sort-এর অবস্থা: কলামের নাম button-এ, আর চলতি কলামের th-তে aria-sort. WAI-ARIA Authoring Practices-এর sortable table উদাহরণ এই ধরনই দেখায়।
• Error: জরুরি বার্তায় role="alert" দেওয়া যায়। শুধু রঙে নয়, লেখায়ও বলুন।
• Focus: সারি মুছলে focus body-তে পড়ে যেতে পারে, keyboard ব্যবহারকারী পাতার শুরুতে চলে যান। মোছার পরে focus পাশের সারিতে বা list-এর শিরোনামে আনুন। স্থায়ী key থাকলে সরে যাওয়া সারিতে focus ঠিক থাকে।

১০ · AI-এর যুগে list আর শর্ত

List-এর কোড AI কয়েক সেকেন্ডে লেখে, আর প্রথম দেখায় ঠিকই চলে। সমস্যা ধরা পড়ে সারি সরালে, list খালি হলে, নেটওয়ার্ক ভাঙলে। তাই যাচাই মানে কোড পড়া নয়, ওই পরিস্থিতিগুলো ঘটানো।

AI-এর লেখা list হাতে পেলে: যাচাইয়ের তালিকা

• Dev server-এর console-এ কোনো key warning নেই, আর linter পাস করেছে
• সারির input-এ লিখে list উল্টে, filter করে, মাঝের সারি মুছে দেখেছি
• খালি array, ধীর নেটওয়ার্ক আর ভাঙা API, তিনটিই নিজে ঘটিয়েছি
• Keyboard দিয়ে চালিয়েছি, আর Network ট্যাবে দেখেছি অন্যের data আসছে না
• নতুন package থাকলে npm-এ আসল কি না আর সত্যিই দরকার কি না দেখেছি; কোনো API চেনা না লাগলে নিজের version-এর নথি পড়েছি