Virtual DOM in React — React Technical Interview Questions & Answers

Virtual DOM in React

Virtual DOM in React

  • The real DOM is the browser tree. React keeps a virtual DOM — an in-memory description of UI. On state change it diffs the new tree with the previous one and patches only what changed (reconciliation). You think in components and state, not $('#x').text().
  • Don’t claim ‘virtual DOM is always faster than vanilla’. It’s faster than naive full innerHTML redraws and easier to reason about. Direct DOM APIs still win micro-benchmarks. Honesty scores.
  • Virtual DOM in React — output: render / diff / patch. You don’t edit document.getElementById for every click.
setState
      │
      ▼
  new virtual tree
      │ diff
      ▼
  patch real DOM

Technical Interview Tip: Diff + patch. Don’t oversell speed.

Code Examples for Virtual DOM in React

Example

// Virtual DOM
console.log("render → virtual tree");
console.log("diff with previous tree");
console.log("patch only what changed in the real DOM");

Virtual DOM in React — output: render / diff / patch. You don’t edit document.getElementById for every click.

How to Explain Virtual DOM in React to an Interviewer

What does reconciliation do?

Diff trees Patch DOM