JSX — markup আর logic একসাথে, render কীভাবে হয়

১ · JSX আসলে কী: HTML-এর মতো দেখতে JavaScript

পর্ব ০৭-এ দেখেছেন, React-এ UI ভাগ হয় component-এ, আর component হলো একটি ফাংশন। সেই ফাংশন কী ফেরত দেয়? দেখে মনে হয় HTML. কিন্তু একটি .js ফাইলের ভেতরে HTML তো চলার কথা নয়। এই ধাঁধার উত্তর হলো JSX.

বাজারঘরের পণ্যের একটি কার্ড দিয়ে শুরু করি। এটি একটি সাধারণ .jsx ফাইল:

export function ProductCard({ name, taka, stock }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p style={{ color: 'green' }}>৳{taka}</p>
      {stock > 0 && <button onClick={addToCart}>কার্টে রাখুন</button>}
    </div>
  );
}

এবার এটিকে আসল compiler দিয়ে অনুবাদ করি। esbuild একটি দ্রুত JavaScript build টুল। নিচের লেখাটি এই পর্বের জন্য নিজের মেশিনে চালানো সত্যিকারের run (esbuild 0.28.2, React 19.3.1, লেখার সময়ের version):

~/bazarghar$ npx esbuild src/ProductCard.jsx --jsx=automatic --charset=utf8
"use strict";
import { jsx, jsxs } from "react/jsx-runtime";
export function ProductCard({ name, taka, stock }) {
  return /* @__PURE__ */ jsxs("div", { className: "card", children: [
    /* @__PURE__ */ jsx("h3", { children: name }),
    /* @__PURE__ */ jsxs("p", { style: { color: "green" }, children: [
      "৳",
      taka
    ] }),
    stock > 0 && /* @__PURE__ */ jsx("button", { onClick: addToCart, children: "কার্টে রাখুন" })
  ] });
}

এখানে কয়েকটি জিনিস খেয়াল করার মতো:

• প্রতিটি tag একটি ফাংশন ডাক হয়ে গেছে। প্রথম argument হলো tag-এর নাম, দ্বিতীয়টি হলো attribute-গুলোর একটি object.
• ভেতরের জিনিসগুলো children নামের একটি ঘরে চলে গেছে। একটি সন্তান থাকলে jsx, একাধিক হলে jsxs (শেষে s) ডাকা হয়, আর children হয় array.
• Import নিজে থেকেই বসেছে। আপনি react/jsx-runtime লেখেননি। এই ব্যবস্থার নাম automatic JSX runtime.
• stock > 0 && হুবহু রয়ে গেছে। {}-এর ভেতরের JavaScript অনুবাদ হয় না, সোজা কপি হয়।
• /* @__PURE__ */ একটি মন্তব্য মাত্র। এটি bundler-কে জানায় ডাকটির ফল ব্যবহার না হলে সেটি মুছে ফেলা নিরাপদ।

TypeScript compiler-ও একই কাজ করে (--jsx react-jsx, TypeScript 7.0.2, সত্যিকারের run). শুধু নাম সামান্য আলাদা, আর বাংলা অক্ষর \u escape হয়ে যায়; string-এর মান একই থাকে:

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function ProductCard({ name, taka, stock }) {
    return (_jsxs("div", { className: "card", children: [_jsx("h3", { children: name }), _jsxs("p", { style: { color: 'green' }, children: ["৳", taka] }), …

আর পুরোনো “classic” পদ্ধতিতে (--jsx=transform) একই কোড হতো React.createElement("div", { className: "card" }, …). তখন প্রতিটি ফাইলের ওপরে import React from 'react' লিখতে হতো। AI বা পুরোনো টিউটোরিয়ালের কোডে আজও সেই লাইনটি দেখবেন।

Vite-এ এই কাজ আপনি হাতে করেন না। পর্ব ০৫-এর কাজের পরিবেশে যে Vite বসিয়েছেন, সেটিই ফাইল পরিবেশনের সময় এই অনুবাদ চালায়। ভেতরের টুল version ভেদে বদলাতে পারে, কিন্তু ফলের রূপ একই: react/jsx-runtime-এর ডাক। এই পর্বের live editor-এও একই ঘটনা ঘটে, শুধু অনুবাদটি হয় আপনার browser-এর ভেতরে।

নামের প্রথম অক্ষরেরও অর্থ আছে। ছোট হাতের <button /> compile হয় jsx("button", {})-এ, অর্থাৎ একটি string. আর বড় হাতের <Button /> হয় jsx(Button, {})-এ, অর্থাৎ Button নামের একটি ভ্যারিয়েবল। তাই component-এর নাম সবসময় বড় হাতের অক্ষরে শুরু করতে হয়। ছোট হাতে লিখলে React সেটিকে HTML tag ভাবে।

২ · {}: JSX-এর ভেতরে JavaScript-এর জানালা

কোঁকড়া বন্ধনী { } হলো JSX-এর ভেতরে খোলা একটি জানালা। তার ভেতরে যে কোনো JavaScript expression লেখা যায়। Expression মানে এমন কোড, যা চললে একটি মান তৈরি হয়। আর যে কোড একটি কাজ করে কিন্তু নিজে কোনো মান হয় না, তাকে বলে statement.

কারণটি আগের অংশেই আছে। <p>{x}</p> হয়ে যায় jsx("p", { children: x }). অর্থাৎ {}-এর ভেতরের জিনিস বসে একটি object-এর ঘরে। সেখানে মান লাগে। সাধারণ JavaScript-এ f(if (x) { … }) যেমন লেখা যায় না, এখানেও তাই। চেষ্টা করলে কী হয়, দেখুন (esbuild 0.28.2, সত্যিকারের run):

X [ERROR] Unexpected "if"

    bad/statement.jsx:2:13:
      2 │   return <p>{if (qty > 0) { 'আছে' }}</p>;
        ╵              ~~

তাহলে শর্ত লিখবেন কীভাবে? তিনটি পথ আছে। return-এর আগে সাধারণ if লিখে একটি ভ্যারিয়েবলে মান রাখা, {}-এর ভেতরে ? : ব্যবহার করা, অথবা &&. List আর শর্তের পূর্ণ আলোচনা পর্ব ১১-তে আছে।

{} কোথায় কোথায় বসে? দুই জায়গায়: লেখার জায়গায় (<h3>{name}</h3>) আর attribute-এর মান হিসেবে (<img src={url} />). Attribute-এ দুই রকম লেখার পার্থক্যটি ছোট, কিন্তু কাজের:

• price="120" দিলে component পায় string '120'.
• price={120} দিলে পায় number 120. হিসাবের জন্য এটিই চাই।
• style={{ color: 'green' }}-এ দুই জোড়া বন্ধনী কোনো বিশেষ syntax নয়। বাইরেরটি জানালা, ভেতরেরটি একটি সাধারণ object.

এ ছাড়া তিনটি ছোট নিয়ম। প্রতিটি tag বন্ধ করতে হয়, তাই <br />, <img /> লিখতে হয়। মন্তব্য লিখতে হয় {/* এভাবে */}. আর return-এর পরে JSX নতুন লাইনে শুরু করলে বন্ধনী ( ) দিতে হয়, নইলে JavaScript সেখানেই return শেষ ধরে নেয়।

৩ · Attribute: কেন className, htmlFor আর camelCase

JSX দেখতে HTML-এর মতো, কিন্তু attribute-এর নাম আসলে একটি JavaScript object-এর key হয়ে যায়। React নাম নিয়েছে মূলত DOM property থেকে, যেগুলো camelCase-এ লেখা। তাই HTML থেকে কোড কপি করলে কয়েকটি জায়গা বদলাতে হয়।

Style object-এ সংখ্যা দিলে React নিজে px বসায়, তবে যেসব property-র একক নেই সেখানে নয়। সত্যিকারের run (React 19.3.1, renderToStaticMarkup):

jsx('p', { style: { fontSize: 18, lineHeight: 1.5, backgroundColor: 'red', marginTop: 0 }, children: 'x' })
→ <p style="font-size:18px;line-height:1.5;background-color:red;margin-top:0">x</p>

একটি অভ্যাসের কথা। React-এর docs নিজেই বলে, style রাখুন শুধু সেই মানের জন্য যা চলার সময় বদলায়। বাকি সব CSS class-এ রাখাই ভালো (className). Styling-এর বড় আলোচনা পর্ব ২২-এ।

আর event-এ সবচেয়ে সাধারণ ভুলটি দেখে রাখুন। onClick={addToCart} মানে “ক্লিক হলে এই ফাংশনটি চলবে”। কিন্তু onClick={addToCart()} মানে “ফাংশনটি এখনই, render-এর সময় চলবে, আর তার ফলই হবে handler”. প্রথমটিতে আপনি ফাংশন দিচ্ছেন, দ্বিতীয়টিতে ফাংশন ডাকছেন। Event নিয়ে পুরো আলোচনা পর্ব ১০-এ।

TypeScript এই ভুলগুলো চালানোর আগেই ধরে, এমনকি পরামর্শও দেয়। সত্যিকারের run (TypeScript 7.0.2, @types/react 19.3.0, আউটপুট সংক্ষিপ্ত করা):

Shelf.tsx(25,31): error TS2322: Type '{ class: string; }' is not assignable to type …
  Property 'class' does not exist on type … Did you mean 'className'?
Shelf.tsx(26,32): error TS2322: Type '{ for: string; children: string; }' is not assignable to type …
  Property 'for' does not exist on type … Did you mean 'htmlFor'?

৪ · Children, Fragment আর TSX-এ তাদের type

একটি tag-এর খোলা আর বন্ধ অংশের মাঝখানে যা থাকে, সেটিই children. আগের compile করা কোডে দেখেছেন, এটি আলাদা কিছু নয়; props-এর ভেতরে children নামের একটি সাধারণ ঘর। তাই আপনার নিজের component-ও এটি পড়তে পারে:

import type { ReactNode } from 'react';

type ShelfProps = {
  title: string;
  children: ReactNode;
};

function Shelf({ title, children }: ShelfProps) {
  return (
    <section>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

// ব্যবহার: মাঝখানে যা দেবেন, সেটিই children
const ok = <Shelf title="চাল">{0}<p>মিনিকেট</p></Shelf>;

এখানে ReactNode হলো “React যা কিছু দেখাতে পারে” তার type: লেখা, সংখ্যা, element, array, null, undefined, boolean ইত্যাদি। পর্ব ০৬-এর TypeScript মনে থাকলে বুঝবেন, এটি একটি বড় union type. children: ReactNode লিখলে compiler বাধ্য করে যে children দিতেই হবে। দিতে ভুলে গেলে, বা সরু type-এ ভুল জিনিস দিলে, সত্যিকারের run-এ যা আসে:

// <Shelf title="ডাল" />
error TS2741: Property 'children' is missing in type '{ title: string; }' but required in type 'ShelfProps'.

// type OneChild = { children: string };  তারপর <Label><i>x</i></Label>
error TS2745: This JSX tag's 'children' prop expects type 'string' which requires multiple children, but only a single child was provided.

Children ঐচ্ছিক হলে লিখুন children?: ReactNode. দ্বিতীয় error-এর ভাষা একটু গোলমেলে, কিন্তু মূল কথা সোজা: এখানে string চাই, আপনি element দিয়েছেন। Component জোড়া দেওয়ার পুরো কৌশল পর্ব ০৯-এ।

একটি মাত্র root, আর Fragment

একটি ফাংশন একটি মানই ফেরত দিতে পারে। return jsx(...) jsx(...) কোনো বৈধ JavaScript নয়। তাই পাশাপাশি দুটি tag ফেরত দিলে error হয় (TypeScript 7.0.2, সত্যিকারের run):

two.tsx(3,5): error TS2657: JSX expressions must have one parent element.

সহজ সমাধান একটি <div>-এ মোড়ানো। কিন্তু কখনো বাড়তি div বসালে HTML-ই ভেঙে যায়। যেমন <dl>-এর ভেতরে dt আর dd জোড়া সরাসরি রাখতে চান। তখন লাগে Fragment: <> … </>. এটি কয়েকটি জিনিসকে একসাথে বাঁধে, কিন্তু DOM-এ কোনো tag তৈরি করে না।

function Row() {
  return (
    <>
      <dt>চাল</dt>
      <dd>৳৭৫</dd>
    </>
  );
}
// esbuild-এর সত্যিকারের অনুবাদ:
//   jsxs(Fragment, { children: [ jsx("dt", …), jsx("dd", …) ] })
// DOM-এ যা হয়:  <dt>…</dt><dd>…</dd>  (বাড়তি কোনো tag নেই)

List-এর ভেতরে Fragment-এ key দিতে চাইলে ছোট রূপটি চলে না; তখন <Fragment key={id}> লিখতে হয়। এর কারণ পর্ব ১১-তে পাবেন।

৫ · React element: UI-র বর্ণনা, একটি সাধারণ object

jsx() ডাকলে ফেরত আসে কী? কোনো DOM node নয়। ফেরত আসে একটি সাধারণ JavaScript object, যার নাম React element.

নিচের কোডটি চালান। প্রথম লাইনের আউটপুটই সেই object. খেয়াল করুন, createRoot(...).render() ডাকার আগে DOM-এ কিছুই নেই।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const taka = 120;
const el = <p className="price">৳{taka}</p>;

console.log(el);
console.log('typeof:', typeof el);
console.log('type:', el.type);
console.log('children:', el.props.children);

const root = document.getElementById('root');
console.log('render-এর আগে DOM-এ element:', root.childElementCount);
createRoot(root).render(el);
setTimeout(() => {
  console.log('commit-এর পরে DOM:', root.innerHTML);
}, 50);
</script>

{ $$typeof: Symbol(react.transitional.element),
  type: 'p', key: null, ref: null,
  props: { className: 'price', children: [ '৳', 120 ] } }

এবার পুরো পথটি এক নজরে ধাপে ধাপে দেখুন। “পরে” চাপতে থাকুন। ধরে নেওয়া হলো taka-র মান 120.

const el = <p className="price">৳{taka}</p>;

const el = jsxs("p", {
  className: "price",
  children: ["৳", taka]
});

{
  $$typeof: Symbol(react.transitional.element),
  type: 'p',
  key: null,
  ref: null,
  props: { className: 'price', children: [ '৳', 120 ] }
}

<p class="price">৳120</p>
↑ className হয়েছে class; "৳" আর 120 দুটি text node

৬ · কোন মান পর্দায় আসে: 0 আর &&-এর ক্লাসিক বাগ

{}-এ যা দেবেন, React সেটি নিয়ে কী করবে? উত্তরটি মানের ওপর নির্ভর করে। নিচের প্রতিটি সারি সত্যিকারের run (React 19.3.1, <p>-এর children হিসেবে দেওয়া):

true কেন দেখায় না, সেটিই এই ব্যবস্থার সুবিধা: এতে {cond && <x />} লেখা যায়। false হলে সেখানে কিছুই বসে না। React-এর docs এই জায়গাকে JSX গাছের একটি “গর্ত” বলে। কিন্তু 0 তো একটি বৈধ তথ্য। “আপনার কার্টে 0টি পণ্য” দেখানোই তো লাগতে পারে। তাই React সেটি দেখায়।

এবার গোলমালটি বুঝতে JavaScript-এর একটি নিয়ম মনে করুন। a && b কোনো boolean ফেরত দেয় না। এটি একটি short-circuit operator: a falsy হলে a-কেই ফেরত দেয়, নইলে b ফেরত দেয়। (এই নিয়ম JavaScript কোর্সের মান ও type-এর পর্বে আছে।) 0 falsy, তাই 0 && <b>…</b>-এর ফল false নয়, স্বয়ং 0.

বাজারঘরে ঠিক এই ঘটনা ঘটল। পণ্য ফুরিয়ে গেলে কার্ডে একটি নিঃসঙ্গ 0 দেখা দিল। পাশাপাশি দুটি component চালিয়ে দেখুন:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Buggy({ stock }) {
  return <p>ভুল: {stock && <b>{stock}টি আছে</b>}</p>;
}
function Fixed({ stock }) {
  return <p>ঠিক: {stock > 0 && <b>{stock}টি আছে</b>}</p>;
}
function App() {
  const [stock, setStock] = useState(0);
  useLayoutEffect(() => {
    const [a, b] = document.querySelectorAll('p');
    console.log('stock', stock, '→', a.textContent, '/', b.textContent);
  });
  return (
    <div>
      <Buggy stock={stock} />
      <Fixed stock={stock} />
      <button onClick={() => setStock(stock + 1)}>স্টক +১</button>
      <button onClick={() => setStock(0)}>শূন্য করুন</button>
    </div>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

1function Stock({ stock }) {2  const bug = stock && <b>আছে</b>;3  const fix = stock > 0 && <b>আছে</b>;4  return <p>{bug}</p>; // সংশোধনে {fix}5}

সারানোর তিনটি পথ আছে। stock > 0 && … সবচেয়ে পরিষ্কার। stock ? … : null-ও ভালো। !!stock && … চলে, তবে পড়তে কম সহজ। এই বাগের সবচেয়ে পরিচিত রূপ হলো items.length && …, তাই সেখানে items.length > 0 লিখুন। একই ধরনের ভুল NaN-এও হয়। ESLint-এর জন্য eslint-plugin-react-এ jsx-no-leaked-render নামে একটি নিয়ম আছে, যা এই ধরনের লেখা ধরতে পারে।

৭ · Escaping: JSX লেখাকে লেখাই রাখে

বাজারঘরে ক্রেতারা পণ্যের review লেখেন। ধরুন কেউ লিখলেন <b>খুব ভালো</b>. এই লেখা আপনি {review} দিয়ে দেখালে কী হবে? মোটা অক্ষর হবে? হবে না। আপনার JSX-এর {}-এ আসা string সবসময় লেখা হিসেবেই পর্দায় যায়, HTML হিসেবে নয়। একে বলে escaping.

কেন এত গুরুত্বপূর্ণ? কারণ কেউ <b>-এর জায়গায় ক্ষতিকর কোড পাঠাতে পারত, আর সেটি অন্য ক্রেতার browser-এ চলত। এই আক্রমণের নাম XSS. এর তত্ত্ব, ধরন আর প্রতিরক্ষা Cybersecurity কোর্সের XSS ও CSP পর্বে আছে। এখানে শুধু React-এর দিকটি দেখি। সত্যিকারের run (React 19.3.1, server-এ HTML বানানোর সময়):

jsx('p', { children: '<b>দাম কম!</b> & "ছাড়"' })
→ <p>&lt;b&gt;দাম কম!&lt;/b&gt; &amp; &quot;ছাড়&quot;</p>

Browser-এ ব্যাপারটি আরও সরল। React লেখা বসায় text node হিসেবে, তাই সেখানে HTML বিশ্লেষণের প্রশ্নই ওঠে না। নিচে একটি নিরীহ <b> দিয়ে দুই পথের পার্থক্য দেখুন:

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const fromUser = '<b>আজ ৫০% ছাড়!</b>';
const trusted = { __html: '<b>আমাদের নিজের লেখা</b>' };

function App() {
  return (
    <div>
      <p id="a">{fromUser}</p>
      <p id="b" dangerouslySetInnerHTML={trusted} />
    </div>
  );
}
createRoot(document.getElementById('root')).render(<App />);
setTimeout(() => {
  const a = document.getElementById('a');
  const b = document.getElementById('b');
  console.log('a-র innerHTML:', a.innerHTML);
  console.log('a-র ভেতরে element:', a.childElementCount);
  console.log('b-র innerHTML:', b.innerHTML);
  console.log('b-র ভেতরে element:', b.childElementCount);
}, 50);
</script>

a-র innerHTML: <b>আজ ৫০% ছাড়!</b>
a-র ভেতরে element: 0
b-র innerHTML: <b>আমাদের নিজের লেখা</b>
b-র ভেতরে element: 1

dangerouslySetInnerHTML নামটি ইচ্ছা করেই লম্বা আর ভয়ের। এটি DOM-এর innerHTML-কে সরাসরি বসায়, আর React তখন কোনো escaping করে না। মান দিতে হয় { __html: … } রূপে, যাতে হাত ফসকে কোনো সাধারণ string এখানে চলে না আসে। একই tag-এ children আর এটি একসাথে দেওয়া যায় না।

Escaping সব ফাঁক বন্ধ করে না, এটিও জানা দরকার। এটি লেখাকে সুরক্ষা দেয়, URL-এর অর্থ নয়। ব্যবহারকারীর দেওয়া লিংক href={url}-এ বসালে সেটি javascript: দিয়ে শুরু হতে পারে। React 19 এখন এমন URL আটকে দেয়। সত্যিকারের run-এ href="javascript:alert(1)" বদলে হয়ে গেল javascript:throw new Error('React has blocked a javascript: URL as a security precaution.'). তবু এর ওপর পুরোপুরি ভরসা না করে নিজে যাচাই করুন: শুধু https: লিংক গ্রহণ করুন। Input যাচাইয়ের বিস্তারিত পর্ব ২৭-এ, আর অ্যাপের পুরো নিরাপত্তা তালিকা পর্ব ৫০-এ আছে।

৮ · Trigger, render, commit: পর্দা বদলের তিন ধাপ

“Render” শব্দটি নিয়ে সবচেয়ে বেশি ভুল বোঝাবুঝি হয়। পর্ব ০৩-এর Rendering-এর মানচিত্রে শব্দটির অর্থ ছিল HTML কোথায় তৈরি হয়। React-এর ভেতরে এর অর্থ আরও সরু: render মানে React আপনার component ফাংশনটি ডাকছে। এটি পর্দা আঁকা নয়। React-এর docs রেস্তোরাঁর উদাহরণ দেয়, আর এটি আমাদের দেশেও মিলে যায়:

এই ধাপগুলোর নির্দিষ্ট অর্থ আছে:

• Trigger: কেউ React-কে জানাল যে update দরকার।
• Render: React component ফাংশন ডাকে, আর যেসব component তার ভেতরে আছে সেগুলোকেও একে একে ডাকে। এই ধাপে DOM-এ হাত পড়ে না। ফলে render একটি pure function-এর মতো হওয়া উচিত: একই ইনপুটে একই ফল, আর বাইরের কিছুতে বদল নয়।
• Commit: React শুধু দরকারি DOM অংশটুকু বদলায়। কোন অংশ দরকারি, সেটি render ধাপেই নতুন আর পুরোনো বর্ণনা মিলিয়ে ঠিক হয়ে থাকে। এই মেলানোর নাম reconciliation, যার ভেতরটা পর্ব ১৫-এ দেখবেন।
• Paint: এটি browser-এর কাজ, React-এর নয়।

একটি ক্লিকের পর ঠিক কী কখন বদলায়, ধাপে ধাপে দেখুন। বিশেষ করে খেয়াল করুন, state, DOM আর পর্দা একই মুহূর্তে বদলায় না।

1function Cart() {2  const [qty, setQty] = useState(1);3  const add = () => setQty(qty + 1);4  return <button onClick={add}>কার্ট: {qty}</button>;5}

এবার একই ক্রম আসল React-এ দেখুন। useLayoutEffect এমন একটি hook, যার ভেতরের কোড commit-এর ঠিক পরে, paint-এর আগে চলে; তাই এখানে এটি commit-এর চিহ্ন হিসেবে কাজ করছে। এর পুরো আলোচনা পর্ব ১৩-তে। Run করুন, তারপর button-এ দুবার ক্লিক করুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Counter() {
  const [n, setN] = useState(0);
  const dom = document.getElementById('c')?.textContent ?? 'নেই';
  console.log('২. render: n =', n, '· DOM-এ এখনো:', dom);
  useLayoutEffect(() => {
    const now = document.getElementById('c').textContent;
    console.log('৩. commit শেষ: DOM-এ এখন:', now);
  });
  function add() {
    console.log('১. trigger: setN ডাকা হলো');
    setN(n + 1);
    console.log('   setN-এর পরেও এই n =', n);
  }
  return <button id="c" onClick={add}>{n}</button>;
}
console.log('১. trigger: root.render ডাকা হলো');
createRoot(document.getElementById('root')).render(<Counter />);
</script>

১. trigger: root.render ডাকা হলো
২. render: n = 0 · DOM-এ এখনো: নেই
৩. commit শেষ: DOM-এ এখন: 0
১. trigger: setN ডাকা হলো
   setN-এর পরেও এই n = 0
২. render: n = 1 · DOM-এ এখনো: 0
৩. commit শেষ: DOM-এ এখন: 1

Re-render ঠিক কখন হয়

একটি component-এর re-render মানে তাকে আবার ডাকা। React-এর নিজের docs দুটি মূল কারণ বলে: প্রথমবার দেখানো, আর state-এর বদল। বাস্তব কোডে সেটি এই তালিকায় দাঁড়ায়:

লক্ষ করুন, “props বদলানো” নিজে কোনো trigger নয়। Props নতুন আসে parent render হওয়ার কারণেই। আর এক event-এর ভেতরে কয়েকটি set ডাকলে React সেগুলো একসাথে করে একটি render চালায়; একে বলে batching. বিস্তারিত পর্ব ১০-এ।

একটি হিসাব: ২০০টি কার্ড, একটি সংখ্যা

৯ · বাংলা লেখা আর সংখ্যা: Intl দিয়ে দেখানো

JSX-এ বাংলা লেখা সরাসরি লেখা যায়, ফাইলটি UTF-8 হলেই হলো। সমস্যা আসে সংখ্যায়। {1234567.5} লিখলে পর্দায় আসে 1234567.5. বাংলাদেশের পাঠক পড়েন “১২ লাখ ৩৪ হাজার”। হাতে কমা বসানো বা অঙ্ক বদলানোর ফাংশন লেখার দরকার নেই। Browser আর Node, দুই জায়গাতেই আছে Intl API. সত্যিকারের run (Node 24.15, bn-BD locale):

const n = 1234567.5;
new Intl.NumberFormat('bn-BD').format(n);
new Intl.NumberFormat('bn-BD', { style: 'currency', currency: 'BDT' }).format(n);
new Intl.NumberFormat('bn-BD', { style: 'currency', currency: 'BDT',
                                 maximumFractionDigits: 0 }).format(120);
new Intl.NumberFormat('en-US').format(n);
new Intl.DateTimeFormat('bn-BD', { dateStyle: 'long', timeZone: 'Asia/Dhaka' })
  .format(new Date('2026-11-01T06:00:00Z'));
new Intl.ListFormat('bn-BD', { type: 'conjunction' }).format(['চাল', 'ডাল', 'তেল']);

১২,৩৪,৫৬৭.৫
১২,৩৪,৫৬৭.৫০৳
১২০৳
1,234,567.5
১ নভেম্বর, ২০২৬
চাল, ডাল এবং তেল

লাখ-হাজারের কমা, বাংলা অঙ্ক, মুদ্রার চিহ্ন, সব নিজে থেকে এল। React-এ এর ব্যবহার সহজ: state-এ সংখ্যাই রাখুন, আর render-এর সময় format করুন।

// একবার বানিয়ে রাখা, যাতে প্রতি render-এ নতুন করে না বানাতে হয়
const taka = new Intl.NumberFormat('bn-BD', {
  style: 'currency', currency: 'BDT', maximumFractionDigits: 0,
});

export function Price({ amount }) {
  return <p className="price">{taka.format(amount)}</p>;
}
// <Price amount={120} />  →  ১২০৳

তিনটি সতর্কতা মনে রাখুন। এক, চিহ্নটি সংখ্যার পরে বসেছে, কারণ এই ICU ডেটায় bn-BD-এর নিয়ম তাই; চিহ্ন আগে চাইলে নিজের ডিজাইন অনুযায়ী সাজাতে হবে। দুই, Intl-এর ফল ICU ডেটার version-এর ওপর নির্ভর করে, তাই test-এ এই লেখা হুবহু মেলানো ঝুঁকিপূর্ণ। তিন, server আর browser-এর timezone বা ICU আলাদা হলে দুই জায়গার লেখা অমিল হতে পারে, তাই timeZone সবসময় নির্দিষ্ট করে দিন। এর ফল কী হয়, তা hydration-এর আলোচনায় পর্ব ৫৬-এ দেখবেন। পুরো বাংলা সাইটের কৌশল (font, locale routing) পর্ব ৫৯-এ আছে।

১০ · AI-এর যুগে JSX: কী দেখে যাচাই করবেন

JSX এমন একটি জায়গা, যেখানে AI খুব দ্রুত কোড দেয়, আর সেই কোড সাধারণত চলেও। তাই ভুলগুলো চোখে পড়ে পরে। সমস্যা হলো AI পুরোনো কোড থেকেও শিখেছে, আর “চলছে” মানেই “ঠিক” নয়। নিচের ভুলগুলো বারবার দেখা যায়:

AI-এর JSX হাতে পেলে: যাচাইয়ের চেকলিস্ট

• tsc আর ESLint দুটোই পরিষ্কার, কোনো error লুকানো হয়নি
• শূন্য, খালি list, null আর লম্বা বাংলা লেখা দিয়ে চালিয়ে দেখেছি
• dangerouslySetInnerHTML খুঁজে দেখেছি; থাকলে উৎস বিশ্বস্ত, নয়তো sanitize করা
• ব্যবহার করা API আমার version-এর অফিসিয়াল docs-এ মিলিয়েছি
• নতুন কোনো package এলে সেটি সত্যিই আছে কি না আর দরকার কি না দেখেছি
• কোনো secret JSX বা client-এর কোডে নেই, diff পড়ে নিশ্চিত হয়েছি