Skip to main content

How is the lifecycle related to the Virtual DOM?

ReactJunior~2 min read
Suggest an edit

Key idea

The Virtual DOM is the foundation React uses to implement a component's lifecycle.

React does not work directly with the real DOM on every change. Instead:

  1. It builds a virtual tree (Virtual DOM): JS objects describing the UI structure.
  2. When state changes (state, props), React creates a new version of the virtual tree.
  3. It compares it to the old version (the reconciliation process).
  4. It computes the minimal set of changes to apply to the real DOM.
  5. It applies them in the commit phase.

And every lifecycle event happens around these steps.

How the Virtual DOM relates to lifecycle phases

Here is the connection, step by step:

StageWhat React does with the Virtual DOMWhich methods / hooks are called
MountReact creates the first virtual tree from JSX componentsuseEffect (after commit), useLayoutEffect, componentDidMount
UpdateReact creates a new virtual tree, compares it to the old one, finds differences (diffing)useEffect (cleanup + new), useLayoutEffect, componentDidUpdate
UnmountReact removes the node from the virtual tree, removes the corresponding DOM elementscleanup functions in useEffect, componentWillUnmount

Example: step by step

javascript
function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log('effect'); return () => console.log('cleanup'); }); return <button onClick={() => setCount(c => c + 1)}>{count}</button>; }
  1. Mount
  • React calls Counter(), creating a Virtual DOM for <button>0</button>.
  • There's nothing to compare against yet, so it creates the <button> DOM element.
  • After the commit, it calls useEffect().
javascript
render -> diff -> commit -> useEffect
  1. Update (setCount)
  • React calls Counter() again, producing a new Virtual DOM: <button>1</button>.
  • It compares the old (<button>0</button>) with the new (<button>1</button>) and sees a difference in the text.
  • It changes only the text in the DOM.
  • It runs the cleanup for the old effect, then the new useEffect.
javascript
render -> diff -> minimal DOM update -> cleanup -> new useEffect
  1. Unmount
  • React removes the Counter Virtual DOM node.
  • It removes the <button> element from the DOM.
  • It calls the cleanup() from useEffect.
javascript
unmount -> cleanup -> remove DOM

Connection to the Render and Commit phases

PhaseWork with the Virtual DOMLifecycle
Render phaseReact rebuilds the Virtual DOM (in memory)The component's render(), reading state, computing JSX
Commit phaseReact updates the real DOM based on the diffuseLayoutEffect, useEffect, componentDidMount, componentDidUpdate, cleanup

Key takeaway

The Virtual DOM is the "workspace" where React decides what needs to change. The lifecycle is the "timeline" of when those changes happen and when you can hook into that process.

Visually

javascript
(state changed) ↓ ┌──────────────┐ │ Render phase │ ← build a new Virtual DOM └──────────────┘ ↓ compare with the previous one (diffing) ↓ ┌──────────────┐ │ Commit phase │ ← update the real DOM └──────────────┘ ↓ call useEffect()

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit