React Fiber Tree and Alternate Tree

React maintains a committed Fiber tree and a work-in-progress Fiber tree so updates can be prepared without immediately replacing the tree currently used for the committed UI. Once rendering finishes and the result is committed, the roles of the two trees can switch.

A Fiber tree is a linked structure of Fiber nodes representing the React element hierarchy along with bookkeeping needed for rendering, reconciliation, and updates. React keeps one tree as the current committed tree: it represents the UI state that has been committed to the host environment.

When an update is rendered, React generally builds or reuses a separate work-in-progress tree. This lets React calculate the next version while retaining the current tree as the committed reference. The two corresponding Fiber nodes are connected through their `alternate` relationship.

During reconciliation, React compares the new React elements with the existing Fiber structure and determines which work should be performed. The work-in-progress tree receives the resulting changes, while the current tree remains available until the new work is ready to commit.

After the render phase completes successfully, React enters the commit phase and applies the necessary host changes. The completed work-in-progress tree then becomes the current tree, and the previous current tree becomes the alternate that can be reused for later work.

This design is important for React's rendering architecture because rendering is separated from committing. Work can be prepared and reconciled before the externally visible tree is updated, which supports React's ability to interrupt, restart, or prioritize rendering work in appropriate execution modes.

Key points

• The current Fiber tree represents the last committed UI state.
• The work-in-progress tree represents the next version being rendered.
• Corresponding Fibers are linked through their `alternate` field.
• Reconciliation builds the next Fiber state without immediately committing host changes.
• After a successful commit, the work-in-progress tree becomes current and the old current tree becomes its alternate.

Interview questions

Why does React maintain both a current Fiber tree and a work-in-progress tree?

The separation lets React calculate the next UI state without discarding the last committed state. The current tree remains the stable reference while reconciliation produces the work-in-progress tree. This also supports React's rendering architecture, where render work can be interrupted or restarted before anything is committed to the host environment. Once the work is ready, React commits it and makes that tree current.

What is the relationship between a Fiber's `alternate`, the current tree, and the work-in-progress tree?

For a Fiber participating in both versions, `alternate` points to the corresponding Fiber in the other tree. If a Fiber belongs to the current tree, its alternate is the corresponding work-in-progress Fiber, and vice versa. React can therefore reuse and update Fiber objects across renders rather than constructing an unrelated representation every time. After a commit, the tree roles change, so the same pair can be reused in the opposite roles.

Does React modify the current Fiber tree during the render phase?

Conceptually, React builds the next state in the work-in-progress tree rather than treating the current committed tree as the mutable output of the render. The current tree remains the reference for what was previously committed. Reconciliation can compare the new elements against that existing structure while preparing the WIP version. The commit phase then makes the calculated changes externally visible.

What happens to the two Fiber trees after a successful commit?

The completed work-in-progress tree becomes the new current tree. The tree that was previously current becomes the alternate side of the relationship. React can then reuse these structures for a later update. Thus, current and work-in-progress describe roles rather than two permanently fixed objects.

How does the current/WIP model relate to React's ability to interrupt rendering?

Because the next state is prepared separately from the committed state, unfinished rendering does not have to become visible immediately. React can pause, abandon, or restart render work without treating partially calculated work as the committed UI. The current tree remains the last committed reference while the WIP tree represents in-progress calculation. This separation is a key part of the architecture used for interruptible rendering.