React · Theory

Virtual DOM in React

Theory

60/94

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.

Diagram

setState
      │
      ▼
  new virtual tree
      │ diff
      ▼
  patch real DOM

Exam tip

Diff + patch. Don’t oversell speed.

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.

Short notes

Real DOM : browser.
VDOM : in-memory + diff + patch.
Trap‘always faster than vanilla’.

React · Theory

Virtual DOM in React

← All stacks

Theory

60/94

Virtual DOM in React

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.

Diagram

setState
      │
      ▼
  new virtual tree
      │ diff
      ▼
  patch real DOM

Exam tip

Diff + patch. Don’t oversell speed.

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.

Short notes

Real DOM : browser.
VDOM : in-memory + diff + patch.
Trap‘always faster than vanilla’.

Virtual DOM in React

Example

Short notes

Questions

Virtual DOM in React

Example

Short notes

Questions