React Fiber Architecture

React Fiber is React’s internal representation of work as a tree of fiber nodes, allowing rendering work to be scheduled, paused, resumed, and prioritized. It supports incremental rendering while keeping reconciliation separate from the final commit of DOM changes.

A Fiber node represents a React element’s work and stores information such as its type, key, state, relationships to other fibers, and pending work. Together, fibers form a tree that React can traverse during rendering.

Fiber separates the render phase from the commit phase. During render, React determines what the next UI should look like and builds or updates a work-in-progress fiber tree. This phase can be interrupted because it is primarily computation rather than visible DOM mutation.

After rendering produces the required changes, React enters the commit phase. The commit phase applies effects to the host environment, such as updating the browser DOM, and performs work that must happen synchronously with the committed result.

Fiber also provides a mechanism for assigning priorities to work. Higher-priority updates can be processed ahead of less urgent work, which helps React remain responsive when rendering involves substantial computation.

A key interview distinction is that Fiber is not itself a public component API. It is an internal architecture that enables React’s reconciliation and scheduling behavior; application code normally interacts with public APIs rather than manipulating fiber nodes directly.

Key points

• Fiber nodes form React’s internal work tree.
• Rendering and committing are separate phases.
• Render work can be paused or abandoned before commit.
• Priorities allow React to schedule different updates differently.
• Fiber is an internal implementation detail, not a component API.

Interview questions

What is React Fiber?

Fiber is React’s internal architecture for representing units of rendering work. Each fiber corresponds to work associated with an element or component and participates in a tree. This structure lets React organize and prioritize rendering rather than treating an entire update as one indivisible operation.

Why did React introduce Fiber?

Fiber was designed to make rendering work more incremental and schedulable. React can break work into units, assign priorities, and avoid blocking the browser unnecessarily during expensive rendering. This architecture also provides a clearer separation between preparing changes and committing them.

What is the difference between the render phase and the commit phase?

The render phase determines what changes are needed and constructs the next internal result. React can perform this work without immediately mutating the DOM. The commit phase then applies the necessary mutations and runs commit-related effects, so it must preserve the consistency of the visible UI.

How does Fiber help React prioritize updates?

Fiber gives React a unit-based representation of work that can carry scheduling information. React can therefore decide which pending work should receive attention instead of processing all updates as one uninterrupted task. Modern React scheduling builds on this architecture to coordinate urgent and less urgent rendering work.

Can React render the same component more than once before committing?

Yes. Render work can be started, interrupted, restarted, or abandoned before it reaches the commit phase. Therefore, render logic should be treated as potentially repeatable and should not rely on side effects occurring exactly once. Side effects that must correspond to committed UI should use the appropriate React mechanisms rather than arbitrary render-time mutations.