React Fiber — source: https://images.indepth.dev/images/2020/10/Inside-Fiber_-in-depth-overview-1.png

As you may know already, one of the critical aspects of React is its ability to manage state and render changes efficiently. To make this possible, React makes use of a virtual DOM and a unidirectional data flow. However, as applications grow in size and complexity, managing state and optimizing performance becomes increasingly challenging.

The React team introduced a new architecture called Fiber to address these challenges. Fiber is a reimplementation of the React reconciliation algorithm that allows for greater control over the rendering process, better performance, and improved developer tools.

Today we will look closely at Fiber architecture and how it works.

What is the Fiber Architecture?

At a high level, the Fiber architecture is a new way of reconciling the virtual DOM in React. Reconciliation is the process by which React determines what changes need to be made to the UI based on changes to the application state. Traditionally, React performs reconciliation synchronously, which blocks the main thread while calculating the changes and updates the DOM.

The Fiber architecture is designed to make this process more efficient by allowing React to perform reconciliation asynchronously. This means that instead of blocking the main thread, React can break up the work of reconciliation into smaller chunks, or “fibers”, that can be scheduled and processed independently.

How Does Fiber Work?

A new data structure called the Fiber tree is at the heart of the Fiber architecture. The Fiber tree represents the virtual DOM that allows React to keep track of the work that needs to be done in a more fine-grained way. Each Fiber in the tree represents a unit of work that needs to be performed, such as updating a component or rendering a new element.

When a component’s state changes, React creates a new Fiber for that component and adds it to the Fiber tree. React then schedules the Fiber for processing, adding it to a queue of Fibers that need to be worked on. React then begins processing the queue, one Fiber at a time.

As React processes each Fiber, it performs a series of steps designed to optimize performance and minimize the impact on the main thread. These steps include:

1. Render — React updates the Fiber’s props and state and determines what changes need to be made to the UI.
2. Commit — React applies the changes to the DOM and updates the Fiber’s state to reflect that the work has been completed.
3. Cleanup — React removes any Fibers that are no longer needed and frees up memory.

The key to the Fiber architecture is that it allows React to pause and resume work anytime. This means that if React needs to prioritize other tasks, such as handling user input or animations, it can do so without blocking the main thread.

Benefits of Fiber Architecture

Photo by Ricardo Gomez Angel on Unsplash

The Fiber architecture provides several key benefits that make it a vital advancement for React. These benefits include:

1. Improved Performance — By allowing React to perform reconciliation asynchronously, it can improve performance by reducing the amount of work needed in a single frame. This can help prevent jank and other performance issues that can make an application slow and unresponsive.
2. Better Developer Tools — This allows React to keep track of the work that needs to be done more granularly; it provides better tools for debugging and profiling applications. Developers can use the React DevTools to inspect the Fiber tree and see how React renders the UI.
3. Smoother Animations — By allowing React to prioritize animation updates over other work, the Fiber architecture can help to make animations smoother and more responsive. This can be especially important in applications that rely heavily on animations, such as games or video players.
4. Easier Server-Side Rendering — The Fiber architecture makes it easier to perform server-side rendering in React. Because React can pause and resume work at any time, it can split the rendering process into smaller chunks that can be executed on the server and sent to the client as needed.
5. Better Concurrency Support — Lays the groundwork for better concurrency support in React. By breaking up the work of rendering into smaller, independent units, React can more easily take advantage of new browser APIs, such as Web Workers, that allow for concurrent execution.