Virtual DOM আর reconciliation — diff, Fiber আর key-এর আসল কাজ

১ · Virtual DOM আসলে কী, আর কী নয়

মডিউল ২-এর শুরু থেকে আপনি একটি কথা বারবার দেখেছেন, বিশেষ করে পর্ব ১০-এ: state বদলালে React component ফাংশন আবার চালায়, আর স্ক্রিন ঠিক হয়ে যায়। এই পর্বে সেই “ঠিক হয়ে যায়” অংশটি খুলে দেখব। প্রশ্ন একটাই: ফাংশন তো নতুন JSX ফেরত দিল, তারপর React কীভাবে বুঝল আসল DOM-এ ঠিক কোন জায়গাটি বদলাতে হবে?

বাস্তবে “virtual DOM” কোনো আলাদা জিনিস বা ব্রাউজারের ফিচার নয়। JSX compile হয়ে একটি ফাংশন-ডাকে পরিণত হয়, আর সেই ডাকের ফল একটি React element, মানে সাধারণ object:

// JSX
<h3 className="name">মসুর ডাল</h3>

// React এর থেকে যে object পায় (সংক্ষেপে)
{ type: 'h3', key: null, props: { className: 'name', children: 'মসুর ডাল' } }

এই object বানানো খুব সস্তা। এতে কোনো layout নেই, style নেই, পর্দায় কিছু আঁকা নেই। React-এর পুরোনো ডকুমেন্টেশনের ভাষায় virtual DOM একটি “programming concept”: UI-এর একটি আদর্শ রূপ মেমরিতে রাখা, আর আসল DOM-এর সাথে তাকে মিলিয়ে নেওয়া।

তাহলে লাভ কোথায়? লাভটি গতিতে নয়, declarative কোড লেখার সুযোগে। আপনি বলেন “স্ক্রিন কেমন হবে”, আর একটি যুক্তিসংগত খরচে React বাকিটা সামলায়। React না থাকলে দুটি পথ থাকত: প্রতিবার পুরো innerHTML বদলানো (ধীর, input-এর focus হারায়), অথবা হাতে প্রতিটি জায়গা মেলানো (ভুলের ঝুঁকি)। Virtual DOM এই দুইয়ের মাঝের পথ।

২ · Diff-এর অঙ্ক: O(n³) থেকে O(n)

দুটি tree-র মধ্যে সবচেয়ে কম পরিবর্তনের তালিকা বের করা একটি পরিচিত গণিতের সমস্যা, নাম tree edit distance. React-এর ডকুমেন্টেশন অনুযায়ী এর সেরা সাধারণ algorithm-এর জটিলতা প্রায় O(n³). Big-O নিয়ে বিস্তারিত আছে DSA কোর্সে। এখানে শুধু হিসাবটি দেখি।

এখানে ধরে নিয়েছি, সেকেন্ডে ১০ কোটি (10⁸) তুলনা হয়; এটি শুধু হিসাবের সুবিধার জন্য, মাপা সংখ্যা নয়। ১,০০০ node-এর জন্য 10⁹ ÷ 10⁸ = 10 s. অথচ ৬০ Hz পর্দায় একটি ফ্রেমের বাজেট মাত্র প্রায় 16.7 ms. তাই নিখুঁত উত্তর খোঁজা এখানে চলবে না। React তাই নিখুঁত হওয়ার দাবি ছেড়ে দুটি heuristic বা বাস্তবসম্মত অনুমান নেয়:

ধরন এক হলে কী হয়? DOM element হলে React একই node রাখে, শুধু বদলানো attribute পাল্টায়। Component হলে একই instance থাকে, তাই state-ও থাকে, আর তার ফাংশন নতুন props নিয়ে চলে। তারপর React children-এ নামে। প্রতিটি node মাত্র একবার দেখা হয়, তাই কাজটি O(n).

এবার নিজে বানিয়ে দেখি। নিচের el() একটি ছোট element বানায়, আর diff() দুটি tree মিলিয়ে একটি patch তালিকা দেয়। “বাজারঘর”-এর একটি পণ্য কার্ডে ছাড় পড়েছে, দাম কমেছে, আর স্টক শেষ। Run চাপুন।

// el(): React element-এর ছোট সংস্করণ, শুধুই একটি object
const el = (type, props, ...kids) => ({ type, props: props || {}, kids });
let visited = 0;

function diff(a, b, path, out) {
  visited++;
  if (a === undefined) { out.push(`INSERT ${path}`); return out; }
  if (b === undefined) { out.push(`REMOVE ${path}`); return out; }
  if (typeof a === 'string' && typeof b === 'string') {
    if (a !== b) out.push(`TEXT ${path}: ${a} -> ${b}`);
    return out;
  }
  if (a.type !== b.type) { // ধরন আলাদা: নিচে আর নামবে না
    out.push(`REPLACE ${path}: ${a.type} -> ${b.type}`);
    return out;
  }
  const names = new Set([...Object.keys(a.props), ...Object.keys(b.props)]);
  for (const k of names) {
    if (a.props[k] !== b.props[k]) out.push(`PROP ${path} ${k}: ${a.props[k]} -> ${b.props[k]}`);
  }
  const n = Math.max(a.kids.length, b.kids.length);
  for (let i = 0; i < n; i++) diff(a.kids[i], b.kids[i], `${path}/${i}`, out);
  return out;
}

const before = el('div', { class: 'card' },
  el('h3', null, 'মসুর ডাল'), el('p', null, '৳120'), el('button', null, 'যোগ করুন'));
const after = el('div', { class: 'card sale' },
  el('h3', null, 'মসুর ডাল'), el('p', null, '৳110'), el('b', null, 'স্টক শেষ'));

const patches = diff(before, after, 'root', []);
patches.forEach(p => console.log(p));
console.log('দেখা node:', visited, '| patch:', patches.length);

PROP root class: card -> card sale
TEXT root/1/0: ৳120 -> ৳110
REPLACE root/2: button -> b
দেখা node: 6 | patch: 3

একই diff ধাপে ধাপে দেখুন। প্রতিটি ধাপে পরে চেপে patch তালিকা কীভাবে বাড়ে, খেয়াল করুন।

1// আগের tree2div.card3  h3: মসুর ডাল4  p: ৳1205  button: যোগ করুন6// নতুন tree7div.card.sale8  h3: মসুর ডাল9  p: ৳11010  b: স্টক শেষ

৩ · State থাকে জায়গায়: position, ধরন আর subtree ধ্বংস

Reconciliation-এর একটি ফল প্রথমে অবাক করে। useState-এর মান component ফাংশনের ভেতরে থাকে না। React সেটি রাখে tree-র একটি নির্দিষ্ট জায়গায়। React দেখে, এই জায়গায় আগের বার কী ছিল, এবার কী এল।

শেষ সারিটি একটি নীরব বাগ। ভেতরে লেখা ফাংশন প্রতি render-এ নতুন ফাংশন হয়, তাই React-এর চোখে “ধরন” বদলায়, যদিও নাম একই। ফলে input-এ প্রতিটি অক্ষর লেখার পর focus চলে যায়। Component সবসময় বাইরে, ফাইলের শীর্ষ স্তরে লিখুন।

নিচের live demo-তে দুটি list আছে। একটিতে key হলো পণ্যের নাম, আরেকটিতে index. Run চাপুন, প্রতিটি list-এ “ডাল +১” দুবার চাপুন, তারপর “উল্টান” চাপুন। শেষে “Wrapper বদলান” চাপুন।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
function Qty({ name, tag }) {
  const [n, setN] = useState(0);
  useEffect(() => {
    console.log('mount', tag, name);
    return () => console.log('unmount', tag, name);
  }, []);
  return <p><button onClick={() => setN(n + 1)}>{name} +১</button> সংখ্যা: {n}</p>;
}
function App() {
  const [names, setNames] = useState(['ডাল', 'চাল']);
  const [boxed, setBoxed] = useState(false);
  const Wrap = boxed ? 'section' : 'div';
  return (
    <Wrap>
      <h4>key = নাম</h4>
      {names.map(x => <Qty key={x} name={x} tag="নাম" />)}
      <h4>key = index</h4>
      {names.map((x, i) => <Qty key={i} name={x} tag="index" />)}
      <button onClick={() => setNames([...names].reverse())}>উল্টান</button>
      <button onClick={() => setBoxed(!boxed)}>Wrapper বদলান</button>
    </Wrap>
  );
}
createRoot(document.getElementById('root')).render(<App />);
</script>

key = নাম:    চাল সংখ্যা: 0 · ডাল সংখ্যা: 2
key = index:  চাল সংখ্যা: 2 · ডাল সংখ্যা: 0

unmount নাম চাল
unmount নাম ডাল
unmount index ডাল
unmount index চাল
mount নাম চাল
mount নাম ডাল
mount index চাল
mount index ডাল

এই demo একটি কাজের কৌশলও শেখায়। Chat বা প্রোফাইল ফর্মে অন্য ব্যবহারকারী বেছে নিলে পুরোনো draft থেকে যাওয়া একটি পরিচিত বাগ। সমাধান একটি শব্দ: <ProfileForm key={user.id} />. Key বদলালে React পুরো form নতুন করে বানায়, আলাদা effect দিয়ে state মুছতে হয় না।

৪ · key-এর আসল কাজ: list-এর diff গুনে দেখা

পর্ব ১১-এ আপনি জেনেছেন list-এ key দিতে হয়। এবার দেখি কেন। স্কুলের ক্লাসের কথা ভাবুন। স্যার যদি “প্রথম বেঞ্চের ছাত্র” বলে ডাকেন, ছাত্ররা জায়গা বদলালে ভুল মানুষকে ডাকা হবে। রোল নম্বর ধরে ডাকলে এই সমস্যা নেই। Index হলো বেঞ্চের ক্রম, স্থায়ী key হলো রোল নম্বর।

নিচের কোড দুইভাবে list মেলায় আর কাজ গোনে। Key-সহ অংশটি React-এর আসল নিয়মের সরল রূপ।

// key ছাড়া: একই index-এর জিনিস তুলনা
function unkeyed(a, b) {
  let text = 0;
  for (let i = 0; i < Math.min(a.length, b.length); i++) if (a[i] !== b[i]) text++;
  return { text, insert: Math.max(b.length - a.length, 0), remove: Math.max(a.length - b.length, 0) };
}

// key সহ: React-এর lastPlacedIndex নিয়মের সরল রূপ
function keyed(a, b) {
  const old = new Map(a.map((k, i) => [k, i]));
  let last = 0, move = 0, insert = 0;
  for (const k of b) {
    if (!old.has(k)) { insert++; continue; }
    const i = old.get(k);
    old.delete(k);
    if (i < last) move++; else last = i;
  }
  return { move, insert, remove: old.size };
}

const show = (name, a, b) => {
  console.log(name);
  console.log('  key নেই:', JSON.stringify(unkeyed(a, b)));
  console.log('  key আছে:', JSON.stringify(keyed(a, b)));
};

const abcd = ['A', 'B', 'C', 'D'];
const list = Array.from({ length: 1000 }, (_, i) => 'p' + i);
show('১০০০টি, শুরুতে ১টি নতুন', list, ['new', ...list]);
show('১০০০টি, শেষে ১টি নতুন', list, [...list, 'new']);
show('D A B C', abcd, ['D', 'A', 'B', 'C']);
show('B C D A', abcd, ['B', 'C', 'D', 'A']);
show('D C B A', abcd, ['D', 'C', 'B', 'A']);

১০০০টি, শুরুতে ১টি নতুন
  key নেই: {"text":1000,"insert":1,"remove":0}
  key আছে: {"move":0,"insert":1,"remove":0}
১০০০টি, শেষে ১টি নতুন
  key নেই: {"text":0,"insert":1,"remove":0}
  key আছে: {"move":0,"insert":1,"remove":0}
D A B C
  key নেই: {"text":4,"insert":0,"remove":0}
  key আছে: {"move":3,"insert":0,"remove":0}
B C D A
  key নেই: {"text":4,"insert":0,"remove":0}
  key আছে: {"move":1,"insert":0,"remove":0}
D C B A
  key নেই: {"text":4,"insert":0,"remove":0}
  key আছে: {"move":3,"insert":0,"remove":0}

৩টি move কেন লাগল? React সামনের দিক থেকে হাঁটে আর lastPlacedIndex নামের একটি সংখ্যা মনে রাখে। অর্থ: এখন পর্যন্ত যাদের জায়গায় রাখা হয়েছে, তাদের সবচেয়ে বড় পুরোনো index. কোনো উপাদানের পুরোনো index এর চেয়ে ছোট হলে সেটি সরাতে হবে।

1// পুরোনো: A=0 B=1 C=2 D=32// নতুন ক্রমে হাঁটা:3D4A5B6C7commit: DOM-এ বসানো

৫ · Fiber: কাজকে ছোট ছোট টুকরো করা

React 16-এর (২০১৭) আগে reconciliation চলত সাধারণ recursive ফাংশনে। Recursion JavaScript-এর call stack ব্যবহার করে, আর stack মাঝপথে থামিয়ে পরে ফিরে আসা যায় না। ৫০ ms-এর কাজ শুরু হলে ৫০ ms পরই ব্রাউজার ছাড়া পেত, ততক্ষণ ক্লিক আর টাইপ অপেক্ষায় থাকত।

একটি fiber হলো একটি সাধারণ JavaScript object, যা একটি component বা element-এর এক টুকরো কাজ বা unit of work বোঝায়। এতে থাকে type, key, props, state, আর সম্পর্কের pointer: child, sibling, return. কাজের হিসাব stack-এ নয়, heap-এর এই object-গুলোয় থাকে, তাই React যেকোনো দুটি fiber-এর মাঝে থামতে পারে।

React একসাথে দুটি fiber tree রাখে। current tree মানে পর্দায় যা আছে। আর work-in-progress tree মানে যা বানানো হচ্ছে। কাজ শেষ হলে React root-এর pointer বদলে নতুন tree-কে current করে দেয়। তাই ব্যবহারকারী কখনো আধা-বানানো UI দেখেন না।

এই ছবির দুটি ধাপ অনেকেই গুলিয়ে ফেলেন, কারণ দৈনন্দিন ভাষায় “render” মানে পর্দায় আঁকা। React-এর ভাষায় render মানে শুধু আপনার component ফাংশন চালানো। Render ধাপ আর commit ধাপ আলাদা, আর পর্দায় আঁকার কাজকে বলে paint. একটি ক্লিক ধরে তিনটিকে দেখি। Cart-এ সংখ্যা 1 থেকে 2 হচ্ছে।

1click: setQty(2)2Cart3  div4    h3: মসুর ডাল5    b: {qty}6commit: b.textContent7browser paint8useEffect

৬ · Priority আর concurrent feature: কোন কাজ আগে

অনুসন্ধান বাক্সে টাইপ করলে দুটি কাজ হয়: বাক্সে অক্ষর দেখানো, আর ফলের বড় তালিকা বানানো। প্রথমটি দেরি হলে ব্যবহারকারী বিরক্ত হন, দ্বিতীয়টি একটু দেরি হলে কেউ টেরও পান না। React প্রতিটি update-এ একটি অগ্রাধিকার দেয়, ভেতরের নাম lane. আর scheduler ঠিক করে, কোন কাজ কখন চলবে।

এই থামতে পারা ক্ষমতার নাম concurrent rendering, যা React 18 (২০২২) থেকে ব্যবহারে এসেছে। নামে “concurrent” হলেও JavaScript একটি thread-এই চলে। দুটি কাজ একসাথে হয় না; একটি থামিয়ে আরেকটি চলে। এই সুবিধা পেতে একটি concurrent feature ব্যবহার করতে হয়:

function Search() {
  const [text, setText] = useState('');
  const [query, setQuery] = useState('');

  function onChange(e) {
    setText(e.target.value);               // জরুরি: বাক্সের অক্ষর
    startTransition(() => {
      setQuery(e.target.value);            // অ-জরুরি: বড় তালিকা
    });
  }
  return (<>
    <input value={text} onChange={onChange} />
    <SlowList q={query} />
  </>);
}

Transition-এর render time slicing-এ চলে: React-এর scheduler সোর্সে প্রতি টুকরো 5 ms ধরা আছে (frameYieldMs = 5), এরপর ব্রাউজারকে সময় ছেড়ে দেয়। ধরুন তালিকার কাজ 200 ms. একটানা চললে পুরো 200 ms ব্রাউজার আটকে থাকে। টুকরো করলে 200 ÷ 5 = ৪০টি টুকরো, আর প্রতিটির ফাঁকে একটি ক্লিক বা অক্ষর ঢুকতে পারে। SlowList-কে memo দিয়ে মুড়ে রাখতে হয়, নইলে জরুরি render-এও তালিকাটি চলবে।

আমরা এটি বাস্তবে মেপেছি। ১০০টি component-এর প্রতিটি ইচ্ছা করে 2 ms সময় নেয়। আসল কী-চাপে “abcde” টাইপ করা হলো, প্রতিটি অক্ষরের ফাঁক 60 ms.

blocking   slowRenders 500 listCommits 5 longtasks ms [207, 203, 203, 205, 203] value abcde
transition slowRenders 252 listCommits 1 longtasks ms [] value abcde

Transition ছাড়া ৫টি অক্ষরে ৫ বার পুরো তালিকা চলেছে (৫ × ১০০ = ৫০০), আর প্রতিবার প্রায় 205 ms-এর একটি long task তৈরি হয়েছে। Transition-এ long task শূন্য, তালিকা commit হয়েছে মাত্র ১ বার। ২৫২ থেকে শেষ ১০০টি বাদ দিলে বাকি ১৫২টি render শুরু হয়েও বাতিল হয়েছে, DOM-এ যায়নি। তিনবার চালিয়ে সংখ্যাটি পেয়েছি ২৫২, ২৫৮ আর ২৪০. বিনিময়ে তালিকা একটু দেরিতে আসে, কিন্তু টাইপিং আটকায় না। INP-এর মতো সাড়া দেওয়ার মাপ এখানেই উপকার পায়।

৭ · Batching আর “re-render মানেই DOM বদল নয়”

একটি click handler-এ তিনটি set ডাকলে কি তিনবার render হয়? না। Batching-এর কারণে React সব update জমিয়ে একবারই render করে। ওয়েটার প্রতিটি পদের জন্য আলাদা করে রান্নাঘরে দৌড়ান না; অর্ডার শেষ করে একবারে যান। React 18-এর আগে এটি শুধু React-এর event handler-এ হতো। React 18 থেকে setTimeout, promise বা native event-এও স্বয়ংক্রিয়ভাবে হয়।

এবার মাপার পালা। নিচের কোডে flushSync দিয়ে প্রতিটি update-কে সঙ্গে সঙ্গে শেষ করা হয়েছে, যাতে এক এক ধাপের হিসাব আলাদা পাওয়া যায়। সাধারণ অ্যাপে এটি লাগে না। MutationObserver আসল DOM বদলের রেকর্ড গোনে, আর renders গোনে Row ফাংশন কতবার চলল।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
const items = ['ডাল', 'চাল', 'তেল', 'চিনি'].map((name, i) => ({ id: i, name, price: 100 + i }));
let renders = 0, setList;
function Row({ p }) { renders++; return <li>{p.name}: ৳{p.price}</li>; }
function Shop() {
  const [list, set] = useState(items);
  setList = set;
  return <ul>{list.map(p => <Row key={p.id} p={p} />)}</ul>;
}
const host = document.getElementById('root');
const root = createRoot(host);
ReactDOM.flushSync(() => root.render(<Shop />));
const mo = new MutationObserver(() => {});
mo.observe(host, { subtree: true, childList: true, characterData: true, attributes: true });
function step(label, fn) {
  renders = 0;
  ReactDOM.flushSync(fn);
  console.log(label, '| render:', renders, '| DOM বদল:', mo.takeRecords().length);
}
const copy = l => [...l];
step('একই তথ্য, নতুন array', () => setList(copy));
step('১টি দাম বদল', () => setList(l => l.map(p => p.id === 1 ? { ...p, price: 99 } : p)));
step('তিনবার set', () => { setList(copy); setList(copy); setList(copy); });
step('শেষেরটি সামনে', () => setList(l => [l[3], l[0], l[1], l[2]]));
</script>

একই তথ্য, নতুন array | render: 4 | DOM বদল: 0
১টি দাম বদল | render: 4 | DOM বদল: 1
তিনবার set | render: 4 | DOM বদল: 0
শেষেরটি সামনে | render: 4 | DOM বদল: 6

৮ · Profiler-এ render আর commit আলাদা করে দেখা

হাতে গোনা বাদ দিয়ে এবার আসল টুলে আসি। React-এর <Profiler> component প্রতিটি commit-এর পর আপনার ফাংশন ডাকে। React DevTools-এর Profiler ট্যাবও একই ধরনের সময় দেখায়। “বাজারঘর”-এর ১,০০০ সারির তালিকায় একটি পণ্যের দাম বদলে মাপলাম, memo ছাড়া আর সহ।

const onRender = (id, phase, actualDuration) => {
  console.log(id, phase, actualDuration.toFixed(2) + ' ms');
};

<Profiler id="shop" onRender={onRender}>
  <Shop />
</Profiler>

nomemo mount: rows=1000 domCalls=4001 actual=25.8
nomemo update median of 41: rows=1000 domCalls=1 actual=2.70ms
memo   mount: rows=1000 domCalls=4001 actual=24.5
memo   update median of 41: rows=1 domCalls=1 actual=1.20ms

দেখুন কী পাওয়া গেল। Mount-এ domCalls ৪,০০১টি: ১,০০০টি সারির প্রতিটিতে ৪টি (li আর ৩টি লেখা), সাথে একটি ul. Update-এ memo ছাড়া ১,০০০টি সারি render হলো, কিন্তু DOM-এ গেল ঠিক ১টি কাজ। memo-তে render ১টিতে নামল, DOM কাজ একই ১টি, আর সময় প্রায় 2.7 ms থেকে 1.2 ms হলো। অর্থাৎ memo render বাঁচিয়েছে, কিন্তু ১,০০০ গুণ সময় বাঁচায়নি, কারণ ১,০০০টি props তুলনা তখনো চলছে। আর এখানে 2.7 ms নিজেই ফ্রেম বাজেটের অনেক ভেতরে। এমন তালিকায় memo না দিলেও ব্যবহারকারী পার্থক্য টের পেতেন না।

৯ · Solid আর Svelte: virtual DOM ছাড়া পথ

React-এর পথ হলো “আবার চালানো, তারপর মেলানো।” কিন্তু যদি আগে থেকেই জানা যায়, কোন মান কোন DOM জায়গায় বসে? তাহলে মেলানোর দরকারই নেই। এই ভাবনাই fine-grained reactivity.

এর মানে “React পুরোনো” নয়। React Compiler (স্থিতিশীল ১.০, অক্টোবর ২০২৫) build-এর সময় স্বয়ংক্রিয়ভাবে memoization যোগ করে, ফলে অপ্রয়োজনীয় render কমে; virtual DOM মডেল কিন্তু থাকে। Benchmark-এ fine-grained পদ্ধতি অনেক ক্ষেত্রে এগিয়ে থাকলেও বেশিরভাগ অ্যাপে ধীরতার কারণ network, ছবি আর বড় bundle. Svelte নিয়ে পর্ব ৬৭-এ, Vue-র reactivity নিয়ে পর্ব ৬৬-এ আরও দেখবেন।

১০ · AI-এর যুগে: performance পরামর্শ যাচাই করা

AI-কে “React অ্যাপ দ্রুত করে দাও” বললে সে প্রায়ই সব জায়গায় memo আর useMemo ছড়িয়ে দেয়, না মেপেই। এই পর্বের জ্ঞান দিয়ে আপনি তার প্রতিটি দাবি পরীক্ষা করতে পারেন।

AI-এর পরামর্শ নেওয়ার আগে চেকলিস্ট

• বদলের আগে আর পরে Profiler-এ মেপেছি, শুধু “দ্রুত লাগছে” বলে থামিনি
• ব্যবহৃত API আমার React version-এর official docs-এ আছে
• নতুন package সত্যিই আছে, আর আসলেই দরকার কি না দেখেছি
• List-এর key ডেটার স্থায়ী id, আর reorder করে state মিলিয়েছি
• Diff পড়েছি; error লুকানো হয়েছে কি না, secret ঢুকেছে কি না দেখেছি
• গুরুত্বপূর্ণ আচরণের জন্য একটি test লিখেছি