Back to Blog
2026-07-28·8 min read·16 okunma

React Under the Hood #1: Virtual DOM and Fiber Architecture

In this article, we explore the logic behind the Virtual DOM, which is synonymous with React's performance, how the code we write transforms behind the scenes, and the inner workings of the React Fiber engine that keeps this structure up to date.

ReactVirtual DOM

1. Why Was a New DOM Needed?

The real DOM (Document Object Model) provided by the browser is a tree-structured data model. However, every single node on the real DOM is a massive JavaScript object. When you mutate an element, the browser is forced to perform two heavy operations:

  • Reflow (Layout): Recalculating the geometric position and dimensions of the element on the screen.
  • Repaint: Redrawing the changed element on the screen.

Performing these operations frequently causes the application to freeze and the frame rate (FPS) to drop.

A Metaphor: Architectural Blueprint vs. Real Building Think of the real DOM as a physical building, and the Virtual DOM as the architectural blueprint of this building. When you want to tear down a wall and open a door in the building, you don't directly attack the wall with a sledgehammer; this is too costly and risky. Instead, you draw the new door on the architectural blueprint, compare it with the old plan, and simply tell the construction crew (the Browser), "Tear down the wall at these exact coordinates and install a door." This is exactly what React does.

2. What Does the Virtual DOM Actually Look Like?

As developers, we love using JSX syntax when writing code because it feels as familiar as writing HTML. However, JavaScript engines cannot understand JSX. During the compilation phase (by Babel or SWC), the code we write is transpiled into pure JavaScript objects.

Let's say you wrote a simple button component like this:

jsx
const MyButton = () => {
  return (
    <div className="container">
      <button disabled={false}>Click</button>
    </div>
  );
};

When this code is compiled, it turns into the following lightweight JavaScript object that will reside in the Virtual DOM tree in memory:

json
{
  "type": "div",
  "props": {
    "className": "container",
    "children": [
      {
        "type": "button",
        "props": {
          "disabled": false,
          "children": "Click"
        }
      }
    ]
  }
}

The structure we call the Virtual DOM is exactly this: a "virtual tree" consisting of tens of thousands of nested JavaScript objects just like these. Unlike real DOM nodes, creating and comparing these objects is incredibly cheap and fast.

3. Finding the Changes: The Diffing Algorithm and the Mystery of the
typescript
key

When the state changes, React creates a new Virtual DOM object and compares it with the previous one (the Diffing process). It then applies the differences it finds to the real DOM in a single pass (batch update).

During this reconciliation, React uses some heuristics (shortcuts) to improve performance. The primary purpose of the

typescript
key
prop we use in lists is to assist this process.

jsx
// Bad Practice (Using Index)
{items.map((item, index) => <li key={index}>{item.name}</li>)}

// Good Practice (Using Unique ID)
{items.map(item => <li key={item.id}>{item.name}</li>)}

If you add a new item to the very top of the list and you have used the index as the

typescript
key
, the index (order) of all items will shift. React will assume "All items have changed!" and re-render the entire list from scratch. However, when you use a unique
typescript
id
, React notices only the newly added item and leaves the rest untouched.

4. The Real Power Under the Hood: React Fiber

Thinking of React merely as a "comparison engine" would be incomplete. React Fiber, which came into our lives with React 16, is a brand-new architecture that makes these reconciliation and render processes asynchronous.

A Metaphor: The Theater Stage and Backstage The working mechanism of React Fiber (Double Buffering) is similar to a theater stage. There is a scene that the audience (the user) sees at that moment (Current Tree). Meanwhile, the set for the next scene is being prepared behind the closed curtain (WorkInProgress Tree). If the audience gives an urgent reaction (for example, scrolling on the screen), the director pauses the backstage preparation and responds to the audience. Once the preparation is complete, the curtain suddenly opens, and the new scene is presented to the audience without a single interruption.

The Fiber architecture treats each component as a small "unit of work". Just like an operating system, it can pause, prioritize, or abort tasks. Thanks to this, the main thread doesn't get blocked, and the user experiences a smooth 60 FPS performance.

Summary

What makes React fast is not that it is "faster than the real DOM," but rather that it touches the real DOM the minimum number of times and at exactly the right moment. While the Virtual DOM calculates what has changed, React Fiber coordinates how this calculation will be executed in the background without degrading the user experience. This architecture has revolutionized not just the web, but the mobile development world as well.

All Articles