Virtual DOM and React Render Cycle Explained

1. The Cost of Real DOM Manipulations

The browser's Document Object Model (DOM) is a tree-structured representation of HTML elements on the web page. While in-memory JavaScript operations are measured in nanoseconds, manipulating the real browser DOM is comparatively slow and computationally expensive.

Whenever you mutate a DOM node (e.g., modifying element.style.width or inserting a new <li>):

1. 1
   The browser recalculates styles for all affected elements (Recalculate Style).
2. 2
   It recomputes the exact physical geometry and position of every element on the screen (Layout / Reflow).
3. 3
   It redraws the visual pixels on the screen layers (Repaint).
4. 4
   It merges the layers to output the final display (Compositing).

Repeatedly running this layout-and-repaint pipeline for frequent UI updates causes dropped frames, noticeable stutter, and poor user experience.

2. What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight, pure JavaScript object tree that mirrors the structure of the real browser DOM. Because it is a plain JavaScript object residing in memory, creating, cloning, and inspecting VDOM nodes is blazingly fast and never triggers browser reflows or repaints.

For example, this JSX element:

Is represented under the hood as a lightweight Virtual DOM object similar to:

3. The 3 Phases of the React Render Cycle

React manages UI updates through a disciplined three-phase cycle: Trigger, Render, and Commit.

Phase 1: Triggering a Render

A render is triggered by two events:

• Initial Render: When your application first loads via root.render(<App />).
• State Re-render: When a component's state updater function is invoked (e.g., setCount(prev => prev + 1)) or its parent re-renders.

Phase 2: The Render Phase (Pure Computation)

During the render phase, React executes your component functions from the top down to construct the new Virtual DOM tree.

• React compares the newly generated Virtual DOM tree against the previous Virtual DOM tree using its high-performance Reconciliation Algorithm (historically Fiber).
• It calculates the absolute minimum set of real DOM operations required to reconcile the two trees (the "diff").
• Crucial Rule: The render phase is pure computation; no changes are made to the real browser screen here.

Phase 3: The Commit Phase (DOM Mutation)

Once the diff is calculated, React enters the commit phase:

• On initial render, React uses native methods (appendChild, insertBefore) to place all created DOM nodes into the container.
• On subsequent state updates, React applies only the specific changes (e.g., modifying one text node's content or updating a single attribute) to the real DOM.
• Once React completes mutating the real DOM, the browser paints the screen to reflect the new state.

4. Reconciliation and Keyed Diffing

To achieve $O(n)$ linear performance when diffing large element trees, React relies on two pragmatic heuristic assumptions:

1. 1
   Different Element Types: Two elements of different types (e.g., changing from <div> to <section>) produce completely different trees. React unmounts the old element and mounts the new one from scratch.
2. 2
   Element Keys in Lists: In dynamic lists, React uses the key prop to match elements between renders. This allows React to move, add, or delete specific items without re-creating unaffected sibling nodes.