React: What is Virtual DOM and how does it work in React?

Virtual DOM is a lightweight copy of the real DOM tree of the page, stored in JavaScript memory.

Simple analogy: Imagine you are renovating a room (real DOM). Instead of moving the cabinet, drilling walls, and painting the ceiling every time, you first draw on paper (Virtual DOM): "This is how it should look after renovation." Then you compare the drawing with the current state of the room and do ONLY what changed: moved the chair, hung a picture. This is fast.

Another vivid analogy: Think of it like a restaurant order system. The real DOM is the actual kitchen — chopping ingredients, firing up stoves, and plating dishes is expensive and time-consuming. The Virtual DOM is the order slip. Instead of rebuilding the entire kitchen for every new order, the chef reads the slip, figures out exactly what changed ("this table needs an extra fork, that table needs the soup removed"), and makes only those adjustments. The kitchen stays efficient.

Without Virtual DOM: Change data → browser redraws the ENTIRE page from scratch. Very slow.

With Virtual DOM:

1. Render — you change state → React creates a new Virtual DOM tree.
2. Diff — React compares the new tree with the old one and finds differences.
3. Patch — React applies changes ONLY to the needed elements in the real DOM.

How the diffing algorithm works step by step:

1. React compares elements by type first. If a <div> becomes a <span>, the old element and all its children are destroyed and rebuilt.
2. If the type is the same, React updates only the changed props. For example, if className changed from "active" to "inactive", only that attribute is updated in the real DOM.
3. For lists, React uses the key prop to match elements. Without keys, React falls back to index-based comparison, which can cause bugs when items are reordered or deleted.

Example: You have a list of 1000 tasks. You change one task (to "Completed").

• Without React: browser redraws all 1000 rows.
• With React: Virtual DOM finds which row changed and updates only that row.

1function TaskList({ tasks }) {
2  return (
3    <ul>
4      {tasks.map(task => (
5        <li key={task.id} className={task.done ? "completed" : ""}>
6          {task.name}
7        </li>
8      ))}
9    </ul>
10  );
11}
12// When one task.done changes, React only updates that <li>
13// The other 999 <li> elements remain untouched

Why it matters:

• Performance — direct DOM manipulation is 10-100x slower than JavaScript operations. By batching changes through the Virtual DOM, React minimizes expensive DOM operations.
• Predictability — you describe WHAT the UI should look like for a given state, and React figures out HOW to get there efficiently. This declarative model eliminates an entire class of bugs.
• Cross-platform — the Virtual DOM abstraction allows React Native to use the same programming model for mobile apps, replacing browser DOM operations with native UI operations.

Common mistakes:

• Assuming Virtual DOM is always faster than direct DOM manipulation. For very simple, known changes, direct DOM access can be faster. Virtual DOM shines when changes are complex and unpredictable.
• Not providing keys in lists, which forces React to re-render the entire list instead of diffing efficiently.
• Creating new objects/arrays on every render, which defeats memoization and causes unnecessary re-renders.

React 16+ uses Fiber — a new reconciliation system that can pause and resume work to avoid slowing down the interface. Fiber breaks rendering work into small units called "fibers" and can prioritize urgent updates (like user input) over less urgent ones (like data fetching results). This is what enables concurrent features like useTransition and useDeferredValue in React 18+.