How Things Work

Virtual DOM aur Diffing

React kaise virtual representation banata hai aur minimum DOM changes dhundh ta hai.

How It Works

Virtual DOM ek lightweight JavaScript object tree hai jo real DOM ko mirror karta hai. React do copies rakhta hai: current tree aur 'work-in-progress' tree jo har render ke dauran build hoti hai. Real DOM ko immediately touch karne ki jagah, React dono virtual trees ko diff karta hai aur minimum set of changes compute karta hai — phir unhe ek single batch mein apply karta hai.

JSX React.createElement() calls mein compile hota hai

Jab aap JSX likhte hain, Babel (ya React compiler) use React.createElement(type, props, ...children) calls mein transform karta hai. Yeh plain JavaScript objects return karte hain jise React elements kaha jaata hai — real DOM nodes nahi.

React ek Virtual DOM tree banata hai

React.createElement() ek nested object tree return karta hai jaise '{' type: 'div', props: '{' className: 'box', children: [...] '}' '}'. Yahi Virtual DOM hai — UI kaisi dikhni chahiye uska ek cheap in-memory description.

Update par, React ek naya Virtual DOM tree banata hai

Jab state ya props change hote hain, React aapka component function dobara call karta hai aur naye desired UI ko represent karte hue brand-new Virtual DOM tree produce karta hai.

Diffing algorithm purane vs naye trees compare karta hai

React ka diffing algorithm (O(n) heuristic) dono trees ko simultaneously walk karta hai. Yeh assume karta hai ki different types ke elements different trees produce karte hain, aur renders ke across list items match karne ke liye key prop use karta hai.

Sirf differences real DOM par apply hote hain

Diffing ke baad, React ke paas mutations ki ek list hoti hai: yeh prop update karo, yeh node insert karo, woh node remove karo. Yeh commit phase mein real DOM par apply hote hain — reflows aur repaints minimize karte hue.

Key Concepts

📦React Element

React.createElement() dwara return kiya gaya ek plain JS object. Type, props, aur children describe karta hai. Real DOM node nahi.

🔍Diffing Algorithm

Do virtual trees compare karne ke liye React ka O(n) heuristic. Assume karta hai ki same-position elements same type ke hain jab tak keys differ na karein.

⚖️Reconciliation

Purane aur naye virtual trees compare karne aur minimum set of DOM operations determine karne ki process.

🔑key prop

List items ke liye ek stable identity. React ko old aur new list elements match karne deta hai chahe woh positions shift kar lein.

📦Batched Updates

React ek reconciliation pass se saari DOM mutations collect karta hai aur unhe saath apply karta hai, browser reflows reduce karta hai.

JSX se Virtual DOM tak

tsx

1// JSX you write:
2const element = <div className="box"><span>Hello</span></div>;
3
4// Compiles to:
5const element = React.createElement(
6  'div',
7  { className: 'box' },
8  React.createElement('span', null, 'Hello')
9);
10
11// Produces this Virtual DOM object:
12{
13  type: 'div',
14  props: {
15    className: 'box',
16    children: {
17      type: 'span',
18      props: { children: 'Hello' }
19    }
20  }
21}

💡

Why This Matters

Direct DOM manipulation expensive hai kyunki browser ko layout recalculate aur repaint karna padta hai. JavaScript mein diffing (fast) aur DOM writes batch karne se (slow), React expensive browser operations ki sankhya minimize karta hai. Isliye React apps complex UIs ke saath bhi fast feel karti hain.

Common Pitfalls

⚠Virtual DOM object ko directly kabhi mutate mat karo — React changes efficiently detect karne ke liye immutability assume karta hai.

⚠Dynamic lists mein array indices ko keys ke roop mein use karne se bachein. Agar list reorder hoti hai, React items ko identity ki jagah position se match karega, jisse unnecessary unmounts aur remounts honge.

⚠Virtual DOM FREE nahi hai — element objects banana ek cost hai. Bahut simple UIs ke liye jisme koi state nahi hai, plain HTML faster ho sakta hai.

Real-World Use Cases

1Optimizing Large List Rendering

Scenario

You have a chat app rendering 500+ messages. Scrolling to load older messages causes the entire message list to re-render, taking 300ms and causing visible lag.

Problem

When new messages are appended, React creates a new VDOM tree for the entire list. The diffing algorithm walks all 500+ nodes even though only 20 new messages were added.

Solution

Use windowing (react-window/react-virtualized) to only render visible messages in the VDOM. Combined with proper `key` props, React's diff only processes ~20 visible nodes instead of 500+. The VDOM tree stays small, diffs stay fast.

💡

Takeaway: The VDOM's diffing cost is proportional to tree size, not DOM size. Keeping your VDOM tree small via virtualization is the most effective optimization for large lists.

2Why Inline Objects Cause Unnecessary Diffs

Scenario

A component receives `style={{ color: 'red' }}` as a prop. Despite no visual change, React DevTools shows it re-renders on every parent update.

Problem

Each render creates a NEW style object `{ color: 'red' }`. When React diffs oldProps vs newProps, `oldStyle !== newStyle` (different object reference), so React marks this node as 'changed' and commits a DOM update — even though the actual CSS hasn't changed.

Solution

Hoist the style object outside the component or wrap it in `useMemo`. Now `oldStyle === newStyle` (same reference), the diff correctly marks it as 'unchanged', and React skips the DOM write entirely.

💡

Takeaway: Understanding how the VDOM diff compares props (by reference, not deep equality) reveals why inline objects, arrays, and arrow functions in JSX cause performance issues.

Join the discussion

Comments

Loading comments...

Cookie preferences

We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.