How React Really Works: Fiber, Virtual DOM, and Everything in Between.

If you’ve been using React for a while, chances are you’ve heard terms like “Virtual DOM” or “Fiber”. Maybe you’ve used createRoot() in your latest React project, and wondered: What exactly is React doing under the hood?

This article isn’t just about definitions. I want to take you through the actual journey of what happens from the moment you write:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

…all the way down to how React updates your screen so efficiently. And every time we hit a new term, like “Fiber Tree” or “Concurrent Rendering”, we’ll pause and explain it clearly. Nothing vague. No jargon without meaning.

So let’s start from the very beginning.

What is React doing when you call createRoot()?

When you write ReactDOM.createRoot(...), you’re telling React: “Hey, I’m going to manage this part of the page using React now.”

React will take that DOM element (div#root or any element you give) and internally create a Fiber Root Node. You won’t see this in your code, but behind the scenes, this root becomes the entry point to React’s own internal system, the Fiber Tree.

What is this Fiber Tree?

Think of Fiber Tree as React’s internal brain.

Whenever you build a UI using React components (<App />, <Header />, etc.), React turns each component into a Fiber node.

A Fiber node is just a plain JavaScript object. Each node holds information like:

• What component does it represent
• Its props and state
• Its parent and child nodes
• What needs to be updated

These Fiber nodes are connected to form a tree, the Fiber Tree.

So, what happens when you call render(<App />)?

This is where React gets to work. First, it builds the Virtual DOM.

What is the Virtual DOM?

So, on another tangent, the Virtual DOM is a lightweight copy of the real DOM, built using JavaScript objects.

If your real DOM is the actual UI that the browser shows, the Virtual DOM is a version of that UI React builds and holds in memory. It’s not visible in the browser, but React uses it to figure out what changed.

For example:

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

This becomes something like:

{
  type: 'div',
  props: {},
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Hello']
    }
  ]
}

This is your Virtual DOM tree.

Why doesn’t React just update the real DOM directly?

Because the real DOM is slow. Manipulating it often is expensive.

So React uses a smarter approach:

1. Build a Virtual DOM tree in memory.
2. On each update, build a new Virtual DOM.
3. Compare it with the previous one.
4. Find the smallest difference.
5. Apply only that difference to the real DOM.

This process is called reconciliation.

What is Reconciliation?

Reconciliation is React’s way of saying:

“Let me look at what changed between the last render and this one, and only touch the parts of the DOM that actually need an update.”

Instead of replacing everything, React updates only what’s needed. This makes UI updates much faster and smoother.

But there’s one problem…

What if the component tree is huge?

Imagine a massive page with hundreds of components. Should React pause everything and go through the entire tree before showing anything?

That used to be the case. React rendering was synchronous — it would block the browser until everything was done.

This is where React Fiber comes in.

What is React Fiber really?

React Fiber is React’s rendering engine. It’s the behind-the-scenes system that controls how React builds and updates the UI.

Before Fiber (in React 15 and earlier), React used a recursive algorithm to walk through the component tree. But it couldn’t be paused. That meant large updates would freeze the UI.

Fiber fixed that.

Now, React rendering can be:

• Interruptible: it can pause work and resume later
• Prioritized: more important updates (like typing) can be done before less important ones
• Concurrent: multiple updates can be managed at the same time

All of this is possible because Fiber breaks the work into small units and processes them in chunks.

How does React break work into chunks?

Each component becomes a unit of work.

React builds a Fiber node for each of these, and starts going through them one by one.

If the browser says, “Hey, I need time to respond to user input,” React can pause, let the browser do its thing, and then continue from where it left off.

This is what makes features like Concurrent Rendering possible.

What is Concurrent Rendering?

Concurrent Rendering is a new capability introduced in React 18.

It allows React to prepare multiple UI updates in the background and commit them only when ready. This improves responsiveness.

For example, if you’re typing in a form, React can prioritize that update over a slow image loading somewhere else.

What changed with createRoot() in React 18?

In older versions, you might have used:

ReactDOM.render(<App />, document.getElementById("root"));

This was fine, but didn’t support Concurrent Rendering.

React 18 introduced:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

This small change gives you access to all the new features: concurrent rendering, transitions, streaming, etc.

Can you see all this in action?

Not directly in the browser, but you can peek under the hood.

• Use React Developer Tools to explore the component tree.
• If you console.log(root), you might see internal structures—though they’re not meant for public use.

React’s internals like Fiber and the Virtual DOM aren’t exposed directly, but you can study how they behave by observing when components mount, update, or re-render.

So what’s the flow from code to UI?

Let’s sum it up:

1. You call createRoot(...)
2. React builds a Fiber Root and prepares to manage updates.
3. You render your component tree.
4. React builds a Virtual DOM tree and Fiber Tree.
5. On updates, it:

• Compares the new tree with the old
• Figures out the minimal changes
• Applies only those to the actual DOM

All of this happens in a way that can be paused, resumed, and prioritized.

React does a lot behind the scenes to make your UI feel instant. But once you understand Fiber, Virtual DOM, and how rendering works, you realize, it’s not magic. Just smart design.