🪞

Virtual DOM

RenderingReact's internal model for comparing render results and minimizing real DOM work

Virtual DOM is the way React represents render output in memory, compares the previous and next results, and applies only the necessary changes to the real DOM. Developers write as if the whole UI is recalculated, but React narrows the actual updates.

▶Architecture Diagram

🔄 Process

🌲Previous Tree

🧠State Change

🌳Next Tree

🔍Comparison

🖼️DOM Update

Dashed line animations indicate the flow direction of data or requests

Why do you need it?

Frequent manual DOM reads and writes are expensive and error-prone. As UI grows more dynamic, asking developers to compute every patch themselves becomes both a performance and correctness burden.

Why did this approach emerge?

In the jQuery era, developers often selected nodes and patched them directly. That worked for small interactions, but became harder as state and branching grew more complex. React answered that pressure by calculating render output first, then minimizing real DOM work afterward.

How does it work inside?

When state or props change, React calculates a new render tree. It then compares that tree with the previous one, determines which parts stayed the same and which changed, and commits only the necessary patches to the DOM.

What is it often confused with?

Virtual DOM and refs both touch the border of the real DOM, but they serve different roles. Virtual DOM is React's normal declarative update path. Refs are the escape hatch for directly touching DOM nodes or mutable values outside that path.

Commonly Compared Concepts

🎯

Ref

React's escape hatch for remembering mutable values and touching DOM nodes directly

Virtual DOM is React's default declarative update path, while refs are the escape hatch for direct DOM or mutable access outside that path.

When should you use it?

Understanding Virtual DOM helps explain why keys matter, why state placement affects rerender scope, and why some component state is preserved or reset when branches change. It is best understood as a mental model of React's update process, not as an API you manipulate directly.

Applying only the changed parts of the UI after state updatesReusing keyed items during list reorderingReplacing only the necessary branch in conditional UIsKeeping code declarative without hand-writing DOM patches