What is React Fiber? How Does It Work?

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.

// A fiber node (simplified)
{
  type: 'div',              // Component type
  key: null,
  stateNode: domElement,    // Actual DOM node
  child: childFiber,        // First child
  sibling: siblingFiber,    // Next sibling
  return: parentFiber,      // Parent
  pendingProps: {},
  memoizedState: {},
  effectTag: 'UPDATE',      // What needs to happen
  expirationTime: 1073741823 // Priority
}

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.

// Phase 1: "I need to update these 3 divs and remove 1 span"
// (Can be interrupted by user input)

// Phase 2: "Applying all 4 changes to the DOM now"
// (Cannot be interrupted — but it is fast because changes are batched)

Priority Levels (Lanes in React 18+)

// React assigns priority to updates:
// 1. Synchronous: Error boundaries, initial render
// 2. Discrete: Click, keypress (must feel instant)
// 3. Continuous: Drag, scroll (can be slightly delayed)
// 4. Default: Data fetching, setState
// 5. Transition: startTransition() — explicitly low priority
// 6. Idle: Offscreen, prefetching

Concurrent Features (Built on Fiber)

// useTransition — mark updates as low priority
function Search() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value); // High priority — update input immediately
    startTransition(() => {
      setSearchResults(e.target.value); // Low priority — can be interrupted
    });
  }

  return (
    <>
      <input onChange={handleChange} />
      {isPending ? <Spinner /> : <Results />}
    </>
  );
}

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.