What is React Fiber Architecture?

React Fiber is a complete rewrite of React’s core reconciliation algorithm, designed to enable incremental rendering and improve application responsiveness. This article explores what React Fiber is, why it was introduced, how it differs from the previous stack reconciler, and how it enables key features like concurrency and scheduling in modern React applications.

The Need for React Fiber

Before React 16, the library used a synchronous reconciliation engine known as the Stack Reconciler. When a state change occurred, React would traverse the entire component tree recursively to find changes and update the DOM.

While efficient for simple applications, this synchronous approach had a major drawback: it blocked the main thread. If a component tree was deep and complex, the reconciliation process could take longer than 16 milliseconds (the window required to maintain a smooth 60 frames per second). This resulted in dropped frames, stuttering animations, and unresponsive user interfaces during heavy updates.

What is a “Fiber”?

At its core, a Fiber is a plain JavaScript object that represents a unit of work. It corresponds to a React component and contains metadata about its state, props, and relationship to other components in the tree.

Unlike the classic execution stack, which is controlled by the browser’s engine, Fibers are a virtual stack frame implementation. This allows React to control the execution of the stack manually, giving it the ability to: * Pause work and come back to it later. * Assign priority to different types of work. * Reuse previously completed work. * Abort work if it is no longer needed.

Key Capabilities of Fiber Architecture

The Fiber architecture introduces several critical mechanisms that make modern React features possible:

1. Incremental Rendering

Instead of processing the entire component tree in one continuous block, Fiber breaks the rendering work into smaller, manageable chunks. React can execute a chunk of work, pause to let the browser handle user input or animations, and then resume rendering from where it left off.

2. Concurrency and Work Prioritization

Fiber classifies updates into different priority levels. For example: * High Priority: Interactive updates, such as typing in a text input or clicking a button, which require immediate visual feedback. * Low Priority: Background updates, such as rendering off-screen content or fetching data, which can be delayed without degrading the user experience.

If a high-priority update occurs while React is busy rendering a low-priority update, React can pause the current work, process the high-priority update, and then restart or resume the low-priority work.

3. Dual Buffering (Work-in-Progress Tree)

React Fiber operates using two trees: * Current Tree: The tree that is currently visible on the screen. * Work-in-Progress Tree: An alternate tree constructed in memory during reconciliation.

React performs all updates on the work-in-progress tree. Once the reconciliation is complete and all changes are ready, React swaps the pointers, instantly updating the UI. This prevents the user from seeing partially rendered or inconsistent states.

How Fiber Works: The Render and Commit Phases

To manage work effectively, Fiber divides reconciliation into two distinct phases:

Phase 1: Render / Reconciliation (Interruptible)

In this phase, React traverses the component tree and computes the changes that need to be made to the DOM. This phase is asynchronous and can be paused, aborted, or restarted by the scheduler if higher-priority tasks arise.

Phase 2: Commit (Uninterruptible)

Once the work-in-progress tree is fully computed, React enters the commit phase. In this phase, React applies the calculated changes to the DOM and executes lifecycle methods or hooks (like useEffect). To avoid an inconsistent UI, this phase is synchronous and cannot be interrupted.