Lightweight
Fast

Virtual DOM

The speed of plain objects meets the power of the UI.

The Virtual DOM

React's secret blueprint. See how it separates the logic from the heavy lifting of the browser.
Continue

Heavy DOM vs. Light VDOM

The Real DOM is slow and heavy like a database. The Virtual DOM is just a lightweight JavaScript object—fast as lightning.
Continue

Phase 1: Render

Your code runs, and React creates a fresh tree of objects. Notice how the code directly maps to the tree structure.
Continue

Phase 2: The Diff Engine

React Scans the Old vs New tree. It pinpoints the EXACT node that changed props. This is O(n) heuristic magic.
Continue

Phase 3: Commit & Paint

Precision surgery. React touches ONLY the DOM node that needs updating, avoiding a full page repaint.
Continue

Live Lifecycle

You have control. Trigger a state change and watch the full Render -> Diff -> Commit cycle in real-time.
Continue

Under the Hood

JSX looks like HTML, but it compiles down to plain JavaScript objects. This is the Virtual DOM.

Component.jsx
// What you write
<div className="btn">
  Click Me
</div>
JSX
Compiled.js
// What React sees
React.createElement(
  'div',
  { className: 'btn' },
  'Click Me'
)
JavaScript

The VDOM Object

A lightweight object description. Creating 1000 of these is instant. Creating 1000 real DOM nodes is slow.

VirtualNode.json
{
  type: 'div',
  props: {
    className: 'btn',
    children: 'Click Me'
  },
  key: null,
  ref: null,
  $$typeof: Symbol(react.element)
}
JSON Representation
AlgoAnimator: Interactive Data Structures