By Rahul — Google Frontend Engineer
The Problem Fiber Solves
Before React 16, the reconciliation process (comparing old and new virtual DOM) was synchronous and recursive. Once React started rendering a large component tree, it could not stop until done. This blocked the main thread for 100ms+ causing dropped frames and unresponsive UIs.
What Fiber Changed
Fiber is a complete rewrite of React's core algorithm. It makes rendering interruptible. React can now:
- Pause rendering to handle a user click
- Abort a render if it is no longer needed
- Reuse previous work instead of starting over
- Assign priorities to different types of updates
Fiber Nodes
Each React element becomes a "fiber node" — a JavaScript object that holds information about the component, its state, and its position in the tree. Unlike the old recursive approach, fibers are linked as a linked list, which makes it easy to pause and resume.
Two Phases of Rendering
Phase 1: Render (Interruptible)
React walks the fiber tree, computing changes. This phase can be paused and resumed. No DOM mutations happen here. This is where React figures out WHAT needs to change.
Phase 2: Commit (Synchronous)
React applies all DOM mutations at once. This phase cannot be interrupted — it must be fast. This is where changes become visible to the user.
Priority Levels (Lanes in React 18+)
Concurrent Features (Built on Fiber)
Why This Matters for Developers
- Lifecycle changes: componentWillMount, componentWillReceiveProps, componentWillUpdate are unsafe because the render phase can run multiple times. They were deprecated
- Side effects in render: Never perform side effects during rendering — the render phase is interruptible and your side effect may run multiple times
- useTransition: Use it for expensive state updates that do not need to feel instant
Summary
React Fiber makes rendering interruptible by representing the component tree as a linked list of fiber nodes. It splits work into an interruptible render phase and a synchronous commit phase. This enables concurrent features like useTransition and Suspense. The key takeaway: never perform side effects during rendering.