Props আর composition — component জোড়া দেওয়া

১ · Props — রান্নাঘরে পাঠানো অর্ডারের স্লিপ

একটি রেস্তোরাঁ ভাবুন। ওয়েটার টেবিল থেকে অর্ডার নিয়ে রান্নাঘরে একটি স্লিপ পাঠালেন: “২ প্লেট কাচ্চি, ঝাল কম।” বাবুর্চি স্লিপ পড়েন, স্লিপ অনুযায়ী রান্না করেন। তিনি স্লিপে কলম চালান না। ক্রেতা মত বদলালে ওয়েটার নতুন স্লিপ আনেন।

React-এ component হলো বাবুর্চি, আর props হলো সেই স্লিপ। পর্ব ০৭-এ দেখেছেন component একটি function. পর্ব ০৮-এ দেখেছেন JSX আসলে function ডাকার সংক্ষিপ্ত রূপ। তাই <PriceTag taka={140} unit="কেজি" /> লিখলে React এই object-টি বানিয়ে function-কে দেয়:

PriceTag({ taka: 140, unit: "কেজি" })

লক্ষ করুন, taka={140}-তে বাঁকা বন্ধনী আছে, কারণ এটি JavaScript-এর সংখ্যা। unit="কেজি"-তে উদ্ধৃতি আছে, কারণ এটি সাধারণ string. Props-এ যেকোনো মান যায়: সংখ্যা, লেখা, array, object, function, এমনকি অন্য JSX.

নিয়মটি ভাঙলে কী হয়? একটি ছোট project-এ component-টি নিজের prop দ্বিগুণ করার চেষ্টা করল। একই কোড React-এর দুই build-এ চালানো হলো।

function Price(props: { taka: number }) {
  props.taka = props.taka * 2;   // নিয়ম ভাঙা: prop বদলানো
  return <span>{props.taka} টাকা</span>;
}

console.log(renderToString(<Price taka={140} />));

সত্যিকারের run · লেখার সময়ে React 19.3.1, tsx 4.23 · ~/bazarghar

$ NODE_ENV=development npx tsx src/mutate.tsx
TypeError: Cannot assign to read only property 'taka' of object '#<Object>'
    at Price (src/mutate.tsx:4:9)
    …

$ NODE_ENV=production npx tsx src/mutate.tsx
<span>280<!-- --> টাকা</span>

ফলটি শিক্ষণীয়। Development build-এ React props object-কে জমিয়ে (Object.freeze) দেয়, তাই সঙ্গে সঙ্গে error আসে। Production build-এ বাড়তি খরচ এড়াতে এই পাহারা থাকে না। সেখানে কোনো error নেই, শুধু ১৪০ টাকার ডাল হয়ে যায় ২৮০ টাকা। নিয়মটি production-এ পাহারাহীন, তাই ভুলটি ধরার জায়গা development.

এবার একটি ট্রি ধরে props-এর চলাচল দেখুন। “বাজারঘর”-এর পণ্যের পাতায় ডেটা সবচেয়ে ওপরের component-এ আছে। “পরে” চাপুন, আর প্রতিটি ধাপে props object-টি খেয়াল করুন।

const products = [
  { id: 7, name: "মসুর ডাল", price: 140 },
  { id: 9, name: "মিনিকেট চাল", price: 85 },
];

{ products: [ …২টি পণ্য… ] }

প্রথম কার্ড:  { product: { id: 7, name: "মসুর ডাল", price: 140 } }
দ্বিতীয় কার্ড: { product: { id: 9, name: "মিনিকেট চাল", price: 85 } }

{ variant: "primary", children: "কার্টে যোগ করুন" }
পণ্যের দাম বা নাম Button জানে না, জানার দরকারও নেই

আগের প্রথম কার্ড: { product: { id: 7, …, price: 140 } }
পরের প্রথম কার্ড: { product: { id: 7, …, price: 150 } }

২ · Destructuring, default, rest আর spread

এই চারটি JavaScript-এরই কৌশল, React-এর নয়। ভাষার দিকটি আছে JavaScript কোর্সের destructuring আর spread পর্বে. এখানে শুধু props-এ এদের ব্যবহার দেখব। Destructuring মানে object-এর ঘরগুলো আলাদা নামে খুলে নেওয়া। Component-এর প্রথম লাইনেই এটি করলে বোঝা যায় সে কোন কোন prop নেয়।

function PriceTag({ taka, unit = "কেজি", ...rest }) {
  return <span {...rest}>৳{taka} / {unit}</span>;
}

<PriceTag taka={140} />                       // unit হবে "কেজি"
<PriceTag taka={95} unit="লিটার" title="তেল" /> // title যাবে rest-এ

Default নিয়ে একটি সূক্ষ্ম ফাঁদ আছে। Default মান বসে শুধু prop অনুপস্থিত হলে, অথবা মান undefined হলে। size={null} বা size={0} দিলে default বসে না। API থেকে null এলে তাই default আপনাকে বাঁচাবে না।

Spread-এ ক্রম গুরুত্বপূর্ণ, কারণ পরের লেখা আগেরটিকে ঢেকে দেয়। <button type="button" {...rest}> মানে ব্যবহারকারী চাইলে type বদলাতে পারবেন। <button {...rest} type="button"> মানে পারবেন না। বাস্তব কাজে দুই রকমই দরকার হয়, তাই ক্রম ভেবে লিখতে হয়।

Spread কখন ক্ষতি করে

React-এর docs-ও বলে, spread সংযমের সঙ্গে ব্যবহার করতে হবে। পর্ব ০৬-এ দেখেছিলেন, costPrice মানে কেনা দাম, ক্রেতার কাছে যাওয়ার কথা নয়। এবার একটি অলস component পুরো পণ্যটি DOM-এ ছড়িয়ে দিল।

const product = { id: "p7", name: "মসুর ডাল", price: 140, costPrice: 110 };

function Row(props: typeof product) {
  return <li {...props}>{props.name}</li>;
}

সত্যিকারের run · React 19.3.1 · development আর production, দুই build-এ একই HTML

$ NODE_ENV=development npx tsx src/spread.tsx
React does not recognize the `costPrice` prop on a DOM element. …
<li id="p7" name="মসুর ডাল" price="140" costPrice="110">মসুর ডাল</li>

$ npx tsc
(কোনো error নেই)

তিনটি জিনিস একসাথে ঘটেছে। কেনা দাম HTML-এ চলে গেছে, যে কেউ “View Source” করলে দেখবে। React শুধু development-এ একটি সতর্কবার্তা দিয়েছে। আর সবচেয়ে অস্বস্তিকর, tsc চুপ। JSX-এ spread করলে TypeScript বাড়তি ঘর খোঁজে না। Type শুধু দেখে দরকারি ঘরগুলোর মান ঠিক আছে কি না। আরেকটি বিপদ আরও গুরুতর:

// ধরুন এই JSON বাইরের API থেকে এসেছে
const fromApi = JSON.parse(
  '{"title":"অফার","dangerouslySetInnerHTML":{"__html":"<b>injected</b>"}}'
);
function Banner(props: Record<string, unknown>) {
  return <div {...props} />;
}

সত্যিকারের run · React 19.3.1

$ npx tsx src/spread2.tsx
<div title="অফার"><b>injected</b></div>

বাইরের JSON নিজেই একটি prop-এর নাম ঠিক করে দিল, আর অচেনা HTML পাতায় ঢুকে গেল। এটিই XSS (পাতায় অন্যের ক্ষতিকর script ঢোকানো)-এর দরজা, যার তত্ত্ব আছে Cybersecurity কোর্সের XSS পর্বে. নিয়ম: যে object-এর ঘরগুলো আপনি নিজে জানেন না, তা কখনো DOM element-এ spread করবেন না।

৩ · Props-এর চুক্তি — TypeScript দিয়ে লেখা

একটি component আসলে একটি চুক্তি: “আমাকে এগুলো দিলে আমি এই UI দেব।” পর্ব ০৬-এ AddToCart-এর type এক ঝলক দেখেছিলেন। এবার “বাজারঘর”-এর আসল Button লিখি।

import type { ComponentProps, ReactNode } from "react";

type ButtonProps = ComponentProps<"button"> & {
  variant?: "primary" | "secondary" | "danger";
  size?: "sm" | "md";
  loading?: boolean;
  children: ReactNode;
};

প্রতিটি অংশের একটি কাজ আছে। ComponentProps<"button"> মানে HTML button যত attribute নেয়, সব: disabled, onClick, aria-label… হাতে তালিকা লিখতে হয় না। ? মানে ঘরটি ঐচ্ছিক. Literal মানের union বলে দেয় শুধু এই তিনটি variant চলবে। ReactNode হলো যা কিছু React দেখাতে পারে: লেখা, সংখ্যা, JSX, null, অথবা এদের array.

এবার ইচ্ছা করে পাঁচটি ভুল করা হলো। প্রতিটি ভুল সাধারণ জীবনে ঘটে।

<Button variant="dangerous">মুছুন</Button>                  // ৬: বানান ভুল
<ProductCard product={dal} />                              // ৭: onAdd নেই
<ProductCard product={dal} onAdd={(id: string) => {}} />    // ৮: ভুল type
<Button />                                                 // ৯: children নেই

function Tag(props: Readonly<{ text: string }>) {
  props.text = "নতুন";                                     // ১২: prop বদলানো
  …
}

সত্যিকারের run · TypeScript 7.0.2, @types/react 19.3.0 · লম্বা বার্তা ছোট করা হয়েছে

$ npx tsc
src/page.tsx(6,26): error TS2820: Type '"dangerous"' is not assignable to type '"danger" | "primary" | "secondary" | undefined'. Did you mean '"danger"'?
src/page.tsx(7,19): error TS2741: Property 'onAdd' is missing in type '{ product: Product; }' but required in type 'ProductCardProps'.
src/page.tsx(8,45): error TS2322: Type '(id: string) => void' is not assignable to type '(id: number) => void'.
  Types of parameters 'id' and 'id' are incompatible.
    Type 'number' is not assignable to type 'string'.
src/page.tsx(9,19): error TS2741: Property 'children' is missing in type '{}' but required in type …
src/page.tsx(12,9): error TS2540: Cannot assign to 'text' because it is a read-only property.

প্রথম লাইনে compiler বানানও শুধরে দিতে চাইছে: Did you mean '"danger"'? শেষ লাইনটি লক্ষ করুন। Readonly<…> লিখলে prop বদলানোর ভুল compile-এর সময়ই ধরা পড়ে। ওপরের mutate.tsx-এ Readonly ছিল না, তাই tsc সেখানে কিছু বলেনি। সেই ভুল ধরেছিল শুধু development-এর চলার সময়।

৪ · children আর slot — component-এর ফাঁকা গর্ত

মিষ্টির দোকানের বাক্স ভাবুন। বাক্সের আকার, ঢাকনা, দোকানের ছাপ সব ঠিক করা। ভেতরে রসগোল্লা থাকবে না সন্দেশ, তা বাক্স জানে না। Children prop ঠিক এই ভেতরের জায়গা। Opening আর closing tag-এর মাঝে যা লেখা হয়, React তা children নামে props-এ দেয়।

আর বাক্সের গায়ে যদি আলাদা একটি পকেট থাকে? সেটি slot prop: একটি নামধারী prop, যার মান JSX. নিচের Card-এ children হলো মূল জায়গা, আর footer হলো একটি slot. কোডটি সম্পাদনা করেও দেখতে পারেন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Card({ title, footer, children }) {
  console.log('Card:', title, '| footer:', Boolean(footer), '| children:', children.type);
  return (
    <section style={{ border: '1px solid #94a3b8', borderRadius: 10, padding: 12, margin: 8 }}>
      <h3 style={{ margin: 0 }}>{title}</h3>
      {children}
      {footer && <footer style={{ color: '#475569' }}>{footer}</footer>}
    </section>
  );
}
function App() {
  return (
    <>
      <Card title="মসুর ডাল" footer={<small>স্টকে আছে ১২টি</small>}>
        <p>দাম: ৳140, প্রতি কেজি</p>
      </Card>
      <Card title="আজকের অফার">
        <ul><li>৫ কেজি চালে ডেলিভারি ফ্রি</li><li>তেলে ১০% ছাড়</li></ul>
      </Card>
    </>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

Slot prop-এ শুধু লেখা নয়, পুরো JSX যায়। তাই footer-এ কাল একটি লিংক বা বোতাম দিলে Card বদলাতে হবে না। React-এর পুরোনো docs-এ SplitPane উদাহরণে left আর right নামের দুটি prop দেখানো হয়েছিল, আর বলা হয়েছিল এগুলো অন্য library-র “slots”-এর কথা মনে করাতে পারে। Vue আর Web Components-এ <slot> নামে আলাদা ব্যবস্থাই আছে। React-এ আলাদা কিছু লাগে না, কারণ JSX নিজেই একটি মান।

৫ · Composition বনাম configuration — boolean-এর বিস্ফোরণ

দুইভাবে একটি component-কে নমনীয় করা যায়। Configuration মানে একটি component-এ নতুন নতুন prop যোগ করা, যেন একটি যন্ত্রে সুইচ বাড়ছে। Composition মানে ছোট ছোট component জোড়া দিয়ে নতুন জিনিস গড়া, যেন দর্জি কলার, হাতা আর বোতাম জুড়ে জামা বানান।

শুরুতে দুটিই ঠিক লাগে। সমস্যা শুরু হয় সময়ের সঙ্গে। প্রতিটি নতুন চাহিদায় একটি showX বা isY যোগ হয়। একে বলে boolean prop explosion. হিসাবটি সরল:

ধরুন Button-এ primary, secondary, danger আর small flag আছে। ৪টি flag মানে 2⁴ = ১৬ রকম। অথচ অর্থপূর্ণ অবস্থা কয়টি? রং একটিই হতে পারে, আর আকার ২ রকম: ৩ × ২ = ৬. বাকি ১৬ − ৬ = ১০টি অবস্থা অর্থহীন, যেমন একসাথে primary আর danger. এখন variant আর size দিলে সম্ভাব্য অবস্থা ঠিক ৩ × ২ = ৬টি। অর্থহীন অবস্থা লেখাই যায় না। নিচের block-এ দুটি পাশাপাশি দেখুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const COLORS = { primary: '#2563eb', secondary: '#475569', danger: '#dc2626' };
const look = (bg) => ({ background: bg, color: '#fff', border: 0, borderRadius: 8, padding: '8px 14px', margin: 4 });

function FlagButton({ primary, danger, children }) {
  const bg = primary ? COLORS.primary : danger ? COLORS.danger : COLORS.secondary;
  console.log('FlagButton', { primary, danger }, '=>', bg);
  return <button type="button" style={look(bg)}>{children}</button>;
}
function Button({ variant = 'secondary', children }) {
  const bg = COLORS[variant];
  console.log('Button', variant, '=>', bg);
  return <button type="button" style={look(bg)}>{children}</button>;
}
function App() {
  return (
    <>
      <FlagButton primary danger>মুছুন (flag)</FlagButton>
      <Button variant="danger">মুছুন (variant)</Button>
      <Button>বাতিল</Button>
    </>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

Variant শুধু “কোন একটি” ধরনের পছন্দ সামলায়। কিন্তু পণ্যের কার্ডে যখন এক পাতায় রেটিং লাগে, আরেক পাতায় লাগে না, তখন সমাধান composition. নিচের ধাপগুলো একটি বাস্তব পরিণতি দেখায়।

<ProductCard product={p} />

<ProductCard product={p} showBadge showRating />

<ProductCard product={p} showBadge showRating
  compact hideButton isWishlist />

// ভেতরে:
{showBadge && !compact && …}
{!hideButton && !isWishlist && …}
{isWishlist ? … : compact ? … : …}

function Card({ children }) { … }        // কাঠামো
function ProductImage({ product }) { … }
function ProductPrice({ product }) { … }
function Rating({ value }) { … }
function AddButton({ onAdd }) { … }

// হোম পাতা
<Card>
  <ProductImage product={p} />
  <ProductPrice product={p} />
  <AddButton onAdd={add} />
</Card>
// wishlist পাতা
<Card>
  <ProductImage product={p} />
  <RemoveButton onRemove={remove} />
</Card>

এখানে কোনো চিরস্থায়ী বিজয়ী নেই। ভালো design system দুটিই ব্যবহার করে: ছোট টুকরোতে configuration, বড় কাঠামোতে composition. একটি কাজের সূত্র হলো, দুটি prop যদি একসাথে অর্থহীন হয়, তবে সেগুলো boolean হওয়া উচিত নয়। আর একটি component যদি “এটি হলে এই, ওটি হলে ওই” দিয়ে ভরে যায়, তবে সে আসলে দুটি component.

৬ · Callback — নিচ থেকে ওপরে খবর, আর re-render

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

নিচের কোডে useState আছে। পর্ব ১০-এ এটি পুরো শিখবেন। এখন শুধু জেনে রাখুন, এটি component-এর একটি স্মৃতি, আর setCount সেই স্মৃতি বদলের অনুরোধ জানায়। ধাপে ধাপে দেখুন একটি ক্লিক কোথা থেকে কোথায় যায়।

1function Shop() {2  const [count, setCount] = useState(0);3  const add = (id) => setCount(count + 1);4  return <Card id={7} count={count} onAdd={add} />;5}6function Card({ id, count, onAdd }) {7  return <button onClick={() => onAdd(id)}>কার্টে: {count}</button>;8}

“Props বদলালে re-render হয়” — কথাটি অর্ধেক সত্য

অনেকে শোনেন, props বদলালে component আবার চলে। ফলাফল দেখে এটি ঠিকই মনে হয়, কিন্তু কারণটি উল্টো। Props নিজে থেকে বদলায় না। বাবা re-render হলে তার সব সন্তান ডিফল্টভাবে আবার render হয়, props বদলাক বা না বদলাক। নতুন props সেই render-এর সঙ্গেই আসে। নিচের block শুরুতে একবার render হয়, তারপর নিজে থেকে প্রথম বোতামে একটি ক্লিক করে। আপনিও ক্লিক করতে পারেন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function ProductRow({ name, onAdd }) {
  console.log('  render ProductRow:', name);
  return <li>{name} <button type="button" onClick={() => onAdd(name)}>যোগ করুন</button></li>;
}
function ShopFooter() {
  console.log('  render ShopFooter (কোনো prop নেই)');
  return <small>বাজারঘর, ঢাকা</small>;
}
function Shop() {
  const [count, setCount] = useState(0);
  console.log('render Shop, count =', count);
  function handleAdd(name) {
    console.log('callback উঠে এলো:', name);
    setCount(count + 1);
  }
  return (
    <div>
      <p>কার্টে আছে: {count}টি</p>
      <ul><ProductRow name="ডাল" onAdd={handleAdd} /><ProductRow name="চাল" onAdd={handleAdd} /></ul>
      <ShopFooter />
    </div>
  );
}
createRoot(document.getElementById('root')).render(<Shop />);
setTimeout(() => { console.log('--- একটি ক্লিক ---'); document.querySelector('button').click(); }, 100);
</script>

একটি হিসাব করা যাক। একটি ProductGrid-এ nটি ProductCard, আর প্রতিটি কার্ডে ২টি সন্তান, PriceTag আর Button. Grid একবার re-render হলে function ডাক হয়:

সাধারণত এটি কোনো সমস্যা নয়, কারণ এই function-গুলো খুব দ্রুত চলে। মেপে সমস্যা না পেলে অকারণে সারানোর দরকার নেই। মাপা আর memo-র ব্যবহার আছে পর্ব ২৩-এ। সেখানে দেখবেন, add#1 আর add#2-এর মতো প্রতিবার নতুন function কেন গুরুত্বপূর্ণ।

৭ · Container ভাগ, render prop আর compound component

Container আর presentational

রেস্তোরাঁয় কেউ বাজার করেন, কেউ প্লেট সাজান। Container component ডেটা আনে আর সিদ্ধান্ত নেয়। Presentational component শুধু props পড়ে UI দেখায়। এই ভাগ পর্ব ০৪-এর separation of concerns-এরই ছোট রূপ।

// Container: ডেটা কোথা থেকে আসে, সে জানে
function ProductListPage() {
  const { products, loading } = useProducts();       // custom hook, পর্ব ১৪
  if (loading) return <p>লোড হচ্ছে…</p>;
  return <ProductGrid products={products} onAdd={addToCart} />;
}

// Presentational: শুধু props থেকে UI
function ProductGrid({ products, onAdd }: ProductGridProps) { /* … */ }

লাভ হলো, ProductGrid-কে নকল ডেটা দিয়ে সহজে test করা যায়, আর একই grid অন্য পাতায় ব্যবহার করা যায়। তবে এটি কঠিন আইন নয়। ২০১৫ সালের দিকে Dan Abramov এই ভাগ জনপ্রিয় করেন, আর Hooks আসার পরে তিনি নিজেই লেখেন, এখন আর এভাবে জোর করে ভাগ করার পরামর্শ দেন না। Logic এখন hook-এ সরানো যায়। তাই ভাবনাটি রাখুন, নিয়মটি নয়।

Render prop

কখনো component-এর হাতে ডেটা আছে, কিন্তু প্রতিটি ঘর দেখতে কেমন হবে তা ব্যবহারকারী ঠিক করবেন। তখন JSX-এর বদলে একটি function prop পাঠানো হয়। React-এর docs একে বলে render prop, মানে UI-এর একটি অংশ কীভাবে আঁকা হবে তা ঠিক করা prop.

function PagedList<T>({ items, pageSize, renderItem }: {
  items: T[];
  pageSize: number;
  renderItem: (item: T) => ReactNode;
}) {
  return <ul>{items.slice(0, pageSize).map(renderItem)}</ul>;
}

<PagedList items={products} pageSize={20}
  renderItem={(p) => <li key={p.id}>{p.name} — ৳{p.price}</li>} />

এখানে generic T থাকায় p-এর type হারায় না। আজকাল logic ভাগ করার বেশিরভাগ কাজ custom hook করে। তবে “ঘরটি কেমন দেখাবে” বলার জন্য renderItem-ধরনের prop এখনো খুব প্রচলিত, যেমন লম্বা তালিকা বা টেবিলের library-তে।

Compound component

HTML-এর <select> আর <option> ভাবুন। আলাদাভাবে এদের অর্থ নেই, একসাথে কাজ করে। Compound component মানে এমন কয়েকটি component, যারা গোপনে একটি state ভাগ করে। ব্যবহারকারী JSX-এ এদের ইচ্ছামতো সাজাতে পারেন। নিচের Tabs-এ createContext সেই গোপন পথ। Context পুরো শিখবেন পর্ব ১৭-এ। এখানে শুধু দেখুন, মাঝের কাউকে props দিতে হচ্ছে না।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const TabsCtx = createContext(null);
function Tabs({ defaultValue, children }) {
  const [active, setActive] = useState(defaultValue);
  return <TabsCtx value={{ active, setActive }}>{children}</TabsCtx>;
}
const TabList = ({ label, children }) => <div role="tablist" aria-label={label}>{children}</div>;
function Tab({ value, children }) {
  const { active, setActive } = useContext(TabsCtx);
  const on = active === value;
  return <button type="button" role="tab" id={'t-' + value} aria-selected={on} aria-controls={'p-' + value}
    tabIndex={on ? 0 : -1} style={{ fontWeight: on ? 700 : 400 }} onClick={() => setActive(value)}>{children}</button>;
}
function TabPanel({ value, children }) {
  const { active } = useContext(TabsCtx);
  return <div role="tabpanel" id={'p-' + value} aria-labelledby={'t-' + value} hidden={active !== value}>{children}</div>;
}
createRoot(document.getElementById('root')).render(
  <Tabs defaultValue="info">
    <TabList label="পণ্যের তথ্য"><Tab value="info">বিবরণ</Tab><Tab value="review">রিভিউ</Tab></TabList>
    <TabPanel value="info">মসুর ডাল, ১ কেজি প্যাকেট</TabPanel>
    <TabPanel value="review">৪.৫ তারা, ১২টি রিভিউ</TabPanel>
  </Tabs>);
const show = () => console.log('দেখা যাচ্ছে:', document.querySelector('[role=tabpanel]:not([hidden])').textContent);
setTimeout(() => { show(); document.getElementById('t-review').click(); setTimeout(show, 50); }, 100);
</script>

৮ · “বাজারঘর”-এর Button আর ProductCard — সবার জন্য নকশা

এবার সব জোড়া দেওয়া যাক। পুরোনো ধরনের একটি “বোতাম” দিয়ে শুরু করি, যা দেখতে ঠিক আছে, কিন্তু অনেকের কাজে লাগে না। পরীক্ষার জন্য linter Oxlint চালানো হলো। পর্ব ০৫-এ দেখা এই টুলের accessibility নিয়মগুলো (jsx-a11y) চালু করা হয়েছে।

export function AddButton({ onAdd }: { onAdd: () => void }) {
  return (
    <div>
      <img src="/dal.webp" />
      <div className="btn" onClick={onAdd}>কার্টে যোগ করুন</div>
    </div>
  );
}

সত্যিকারের run · Oxlint 1.90.0 · লম্বা বার্তা ছোট করা হয়েছে

$ npx oxlint --jsx-a11y-plugin -D jsx-a11y/alt-text \
    -D jsx-a11y/click-events-have-key-events \
    -D jsx-a11y/no-static-element-interactions src/ClickDiv.tsx
src/ClickDiv.tsx:4:7: error jsx-a11y(alt-text): Missing `alt` attribute.
src/ClickDiv.tsx:5:7: error jsx-a11y(click-events-have-key-events): Enforce a clickable non-interactive element has at least one keyboard event listener.
src/ClickDiv.tsx:5:8: error jsx-a11y(no-static-element-interactions): Static HTML elements with event handlers require a role.

মাউসে এটি ঠিকই চলে। কিন্তু div Tab চাপলে focus (keyboard এখন যে element-এ আছে) পায় না, Enter-এ সাড়া দেয় না, আর screen reader (পর্দার লেখা পড়ে শোনানোর সফটওয়্যার) একে বোতাম বলে ঘোষণা করে না। alt না থাকলে দৃষ্টিপ্রতিবন্ধী ব্যবহারকারী জানতেই পারেন না ছবিটি কিসের। সমাধান role যোগ করা নয়, আসল <button> ব্যবহার করা। তত্ত্বের জন্য HTML ও CSS কোর্সের accessibility পর্ব দেখুন। এখানে শুধু component-এর দিকটি দেখব।

export function Button({
  variant = "primary", size = "md", loading = false,
  className = "", children, disabled, ...rest
}: ButtonProps) {
  return (
    <button
      type="button"                     // form ভুলে submit হবে না
      {...rest}                         // onClick, aria-label… সব চলবে
      className={`btn btn-${variant} btn-${size} ${className}`}
      disabled={disabled || loading}
      aria-busy={loading}
    >
      {children}
    </button>
  );
}

এই কয়েক লাইনে অনেক সিদ্ধান্ত আছে। type="button" আগে, কারণ HTML-এ form-এর ভেতরে button-এর default type হলো submit. {...rest} এর পরে, যাতে ব্যবহারকারী type="submit" দিতে পারেন। className আর disabled তার পরে, যাতে ব্যবহারকারীর দেওয়া মান মিশে যায়, মুছে না দেয়। এখানে spread নিরাপদ, কারণ type-এ শুধু button-এর props আছে। আর ProductCard:

type ProductCardProps = {
  product: Product;
  badge?: ReactNode;                    // slot: “নতুন”, “২০% ছাড়”…
  onAdd: (id: number) => void;          // callback
};

export function ProductCard({ product, badge, onAdd }: ProductCardProps) {
  const inStock = product.stock > 0;
  const action = inStock ? "কার্টে যোগ করুন" : "স্টক শেষ";
  return (
    <article className="card" aria-labelledby={`p-${product.id}`}>
      <img src={product.imageUrl} alt={product.name} width={240} height={240} />
      <h3 id={`p-${product.id}`}>{product.name}</h3>
      {badge}
      <p>৳{product.price}</p>
      <Button disabled={!inStock} aria-label={`${product.name}: ${action}`}
        onClick={() => onAdd(product.id)}>{action}</Button>
    </article>
  );
}

একটি reusable component-এর accessibility-র বড় অংশ তার API-র মধ্যেই। IconButton-এ aria-label ঐচ্ছিক না রেখে বাধ্যতামূলক করলে কেউ আর লেবেল ভুলতে পারবেন না, কারণ tsc থামিয়ে দেবে। Type এখানে নিয়মের পাহারাদার। মনে রাখবেন, linter সব ধরে না: রঙের contrast বা Tab-এর ক্রম আপনাকে keyboard আর screen reader দিয়ে নিজে পরীক্ষা করতে হবে।

৯ · Prop drilling — যে সমস্যা পরের মডিউল সারাবে

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

“বাজারঘর”-এর হেডারে কার্টের সংখ্যা দেখাতে গিয়ে একই ঘটনা ঘটে। সংখ্যাটি আছে সবার ওপরে, লাগবে সবার নিচে। মাঝের component-গুলো এটি ব্যবহার করে না, তবু নিজের props-এ নিতে হয়। একেই বলে prop drilling.

হিসাবটি সরল: dটি component-এর শিকলে prop পার হয় d − 1টি ধাপ, আর বাহক থাকে d − 2 জন। এখানে d = ৪, তাই ৩ ধাপ আর ২ জন বাহক। কিন্তু দাম সংখ্যায় নয়, বদলের সময়ে। Prop-এর নাম বা type বদলালে প্রতিটি ধাপ ছুঁতে হয়। আর Layout-এর type-এ এমন একটি জিনিস ঢুকে গেল, যার সঙ্গে তার কোনো সম্পর্ক নেই। এতে coupling বাড়ে।

দুই-তিন ধাপের drilling কোনো অপরাধ নয়। এটি স্পষ্ট, আর সহজে খুঁজে পাওয়া যায়। অনেক সময় সমাধান এই পর্বের ভেতরেই আছে: composition.

// আগে: Layout আর Header দুজনেই cartCount বহন করে
<Layout cartCount={count} />

// পরে: CartBadge ওপরেই তৈরি, children/slot হয়ে নামে
<Layout header={<Header cart={<CartBadge count={count} />} />}>
  <ProductListPage />
</Layout>

এখন Layout আর Header সংখ্যাটির কথা জানেই না। তারা শুধু নিজের ফাঁকা জায়গায় যা পায় তা বসায়। React-এর docs-ও context ধরার আগে এই পথ চেষ্টা করতে বলে। তবু ভাষা, লগইন করা ব্যবহারকারী বা theme-এর মতো মান যখন সত্যিই বহু দূরের বহু component-এ লাগে, তখন পর্ব ১৭ · Context আর useReducer এবং পর্ব ১৮ · Zustand আর Redux Toolkit কাজে আসে। আর state ঠিক কোথায় রাখবেন, তার সিদ্ধান্ত আছে পর্ব ১৬-এ।

১০ · AI-এর যুগে — component নকশা যাচাই

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

AI-এর লেখা component হাতে পেলে

• tsc আর linter চালিয়েছি, লাল দাগ any বা as দিয়ে লুকানো হয়নি
• নিজের React version-এর docs-এ প্রতিটি API মিলিয়েছি
• কোনো prop বদলানো হচ্ছে না, আর বাইরের object DOM-এ spread হচ্ছে না
• দুটি prop একসাথে অর্থহীন হয় কি না দেখেছি
• শুধু keyboard দিয়ে পুরো component ব্যবহার করে দেখেছি
• package.json-এর diff পড়েছি, আর পাতার source-এ গোপন কিছু নেই