The JSX Series (Part 3): How JSX Powers Fast Re-renders in React

Updating Your Lego House

Imagine you are building a Lego house. When it’s 70% done, you notice a single blue brick near the bottom was placed in the wrong spot.

Wouldn't it be crazy to tear down the entire house, throw away all your work, and rebuild everything from scratch just to fix that one brick?

Of course it would. That takes too long and wastes effort. Instead, you simply reach in, pop out that single blue brick, and snap the correct one into place while leaving the rest of the structure completely untouched.

React does the exact same thing when updating your user interface.

What Is the Virtual DOM?

When React runs your application, it doesn't immediately construct real HTML DOM nodes in the browser. Instead, it executes the compiled React.createElement() functions to generate a lightweight tree of plain JavaScript objects in memory.

This tree of JavaScript objects sitting in memory is called the Virtual DOM.

How React Re-renders: Diffing the Object Trees

When state changes in your app, React generates a new Virtual DOM object tree and compares it against the previous Virtual DOM tree.

Let's look at an example.

Initial Render:

TypeScript

export default function HelloWorld({ name }: { name: string }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
}

This JSX evaluates to a Virtual DOM object:

JavaScript

{
  $$typeof: Symbol.for('react.element'),
  type: 'div',
  key: null,
  ref: null,
  props: {
    children: {
      $$typeof: Symbol.for('react.element'),
      type: 'h1',
      key: null,
      ref: null,
      props: {
        children: ['Hello, ', 'Edward Phillips', '!']
      }
    }
  }
}

Updating the UI:

Now, imagine you update the component layout from an <h1> to an <h2>:

TypeScript

export default function HelloWorld({ name }: { name: string }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
    </div>
  );
}

React evaluates the new JSX object tree:

JavaScript

{
  $$typeof: Symbol.for('react.element'),
  type: 'div',
  key: null,
  ref: null,
  props: {
    children: {
      $$typeof: Symbol.for('react.element'),
      type: 'h2', // <--- React spots this exact difference!
      key: null,
      ref: null,
      props: {
        children: ['Hello, ', 'Edward Phillips', '!']
      }
    }
  }
}

The Magic: Targeted DOM Updates

React compares the two JavaScript object trees side by side:

1. The outer div is unchanged --> Do nothing.

2. The children text ['Hello, ', 'Edward Phillips', '!'] is unchanged --> Do nothing.

3. The element type changed from 'h1' to 'h2' --> Swap the tag in the real browser DOM.

Just like swapping out a single Lego brick, React tells the browser: "Don't rebuild the page. Just go to this exact location and replace the <h1> node with an <h2> node."

Key Takeaway

Because JSX turns UI markup into fast, lightweight JavaScript objects, React can compare two object trees in milliseconds. It pinpoints the exact differences and updates only what changed in the real DOM—making your applications fast, efficient, and responsive.