Fiber & Concurrent Rendering

The plain-language idea

Before React 16, reconciliation walked the component tree recursively — once started, that walk could not be paused. A big tree meant one long, uninterruptible stretch of work that could block the browser from responding to a keystroke or a scroll.

Fiber re-architected reconciliation around a different data structure: instead of a recursive call stack, each component becomes a "fiber" — a JS object forming a linked list/tree that React can walk incrementally, one unit of work at a time, checking after each unit whether something more urgent (a keystroke) needs the main thread instead.

Pre-Fiber: reconciliation was one long recursive walk down the tree — once started, it could not pause.

BackNext

Where this becomes visible

const [isPending, startTransition] = useTransition();

function handleChange(e) {
  setQuery(e.target.value);              // urgent: keep the input responsive
  startTransition(() => {
    setResults(filterHugeList(e.target.value)); // low-priority: can be interrupted
  });
}

startTransition marks the expensive re-render as low priority — if the user types again before it finishes, React can abandon that in-progress render and start fresh with the latest input, instead of finishing a now-stale render first. isPending lets you show a loading indicator while that lower-priority work is still catching up.

What people usually miss

Watch out

• Fiber is an implementation detail; concurrent features are the payoff. You'll rarely deal with "a fiber" directly — what matters for day-to-day work is knowing that rendering can now be interrupted, prioritized, and resumed, which is what makes useTransition/useDeferredValue possible at all.
• "Concurrent" doesn't mean parallel/multi-threaded. JavaScript is still single-threaded — concurrent rendering means interruptible and prioritizable, not literally simultaneous.
• This is exactly what the reconciliation lesson's algorithm needed to become interruptible — reconciliation is what to update; Fiber is the structure that lets when to do that work become flexible.

Why this matters in interviews

At senior levels, "what changed in React 16's Fiber architecture, and why does it matter?" tests whether you understand why concurrent features like useTransition exist at all — not just that they're new hooks to memorize the API for.