If you have decent experience with React, then you might know it uses the Fiber tree. But do you know why it uses the Fiber tree and what it actually is?

In the previous post, we discussed how JSX is converted into React elements and how these are used to create DOM elements.

Now React needs more than a collection of React elements to manage a running application.

It needs to keep track of component identity, previous work, state, pending updates, effects, and work that needs to be performed.

For that, React uses an internal data structure called a Fiber node. Conceptually, the UI might have a component tree.

 App | / \ Header Counter | | Logo Counter

Conceptually, it looks like this.

It contains information like:

  • The type of the component or host element.
  • Relationships to its parent, children, and siblings.
  • Its current and pending work.
  • References to state and update queues.
  • Effect flags indicating work required during the commit phase.
  • A link to the Fiber representation of another version of that node.

So, it is React’s internal representation for managing a node’s work and lifecycle.

Now, let's come to the main question: why does React need Fiber?

If you know that React uses the reconciliation method to detect updates, then you should also know that detecting those updates and applying those changes are two different tasks.

To apply those changes, React needs to process a large component tree. The Fiber architecture supports that work.

All the work, like applying changes, prioritizing updates, rendering nodes, and pausing, restarting, or abandoning unfinished render work, is supported by Fiber.

That’s why React uses the Fiber tree.