Understanding how React updates the UI starts with the difference between the DOM and the Virtual DOM. These concepts explain how React calculates updates and applies them efficiently.

Here are 4 concepts every React developer should understand.

1. DOM vs Virtual DOM

DOM (Document Object Model)

The DOM is a tree-like object representation of an HTML document that the browser uses to expose and manipulate page content.

<div>
  <h1>Hello</h1>
</div>

The browser represents this structure as nodes that JavaScript can access and modify.

Key points:

• Represents the document’s structure and content.
• DOM mutations can trigger style recalculation, layout, or painting.
• The cost depends on the type and scope of the changes.

Virtual DOM

The Virtual DOM is a common term for React’s in-memory representation of UI elements. React uses this representation to determine what needs to change in the actual DOM.

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

React creates element descriptions from JSX and uses reconciliation to determine the necessary updates.

Key points:

• Represents the UI in JavaScript.
• Helps React calculate updates declaratively.
• Does not guarantee that every update is faster than direct DOM manipulation.

2. How React Updates the UI

When state changes, React typically follows this process:

1. Trigger: A state update schedules a render.
2. Render: React calls components to calculate the next UI.
3. Reconciliation: React compares the new element tree with the previous one to determine what changed.
4. Commit: React applies the necessary DOM mutations.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

When the user clicks the button, React recalculates the component’s UI and updates the relevant DOM content.

Important: React does not necessarily recreate the entire Virtual DOM tree from scratch, nor does it always update only one node. The actual work depends on the component tree and reconciliation results.

3. Why React Doesn’t Update the Entire DOM

React uses reconciliation to determine which DOM changes are necessary.

For example, if a counter changes from 0 to 1, React can update the text content without recreating the surrounding elements.

This helps avoid unnecessary DOM mutations.

However, performance also depends on component rendering, JavaScript execution, layout, painting, and the complexity of the UI.

4. Is the Virtual DOM Faster Than the Real DOM?

Not necessarily. Creating and comparing JavaScript objects also has a cost.

React’s advantage is its declarative programming model and its ability to calculate and coordinate UI updates efficiently. Direct DOM manipulation can be faster for certain simple, specialized operations.

React also batches updates in appropriate situations, reducing redundant work.