Explain React Fiber Architecture in React

13 / 100

Fundamentalsintermediate

React Fiber Architecture

Understand the internal reconciliation engine that powers rendering, scheduling, and interruption in modern React.

Fiber is the name of React's reconciliation algorithm and the internal data structure it uses, introduced in React 16 to replace the older, purely recursive "stack" reconciler. Each component instance in the tree corresponds to a Fiber node, a plain JavaScript object holding the component type, its props, its state, pointers to its child/sibling/parent fibers, and metadata about pending work.

Fiber is like a project manager who breaks one huge task into small ticketed units of work stored on a shared board, so higher-priority tickets (an urgent bug fix) can jump ahead of lower-priority ones (a big refactor) instead of the team being stuck finishing the current giant task start to finish.

Key Concepts

The key innovation Fiber enables is interruptible, incremental rendering. The old stack reconciler walked the entire tree synchronously and couldn't pause partway through, which could block the main thread long enough to drop frames on large updates. Fiber breaks rendering work into units that can be paused, resumed, aborted, or prioritized, which is what makes features like Concurrent Rendering, Suspense, and time-slicing possible.

interruptible, incremental rendering

Fiber nodes exist in pairs across renders — a "current" tree representing what's on screen and a "work-in-progress" tree being built for the next render — and React swaps ("commits") the work-in-progress tree in as the new current tree once it's fully computed. This double-buffering technique is similar to how graphics engines avoid showing a half-drawn frame.

Interviewers rarely expect implementation-level Fiber trivia, but a strong candidate should be able to say that Fiber is what allows React to prioritize urgent updates (like typing) over less urgent ones (like a big list re-render), and that this underpins concurrent features added in React 18.