What is the React Fiber architecture in depth?

Why Interviewers Ask This

This is a differentiating question used for senior and lead roles. Interviewers want to see if you can explain not just what happens, but why — and what the trade-offs are in different approaches.

Answer

React Fiber is React's internal reconciliation engine, a complete rewrite introduced in React 16. A fiber is a plain JavaScript object representing a unit of work. Each React element corresponds to a fiber in the fiber tree. Each fiber contains: the element's type, the associated DOM node, parent/child/sibling fiber links, the effect list (DOM mutations needed), the hook state for that component, the work in progress alternate (for double buffering), and priority (Lanes in React 18). Double buffering: React maintains two trees — the current tree (what is rendered) and the work-in-progress tree (being computed). When work is complete, React atomically switches the two trees. This allows React to build the new tree without affecting the displayed UI. Work loop: the scheduler calls performUnitOfWork on each fiber, building the work-in-progress tree. After completing the work phase (all fibers processed), React enters the commit phase (applying DOM mutations synchronously — cannot be interrupted). Lanes: React 18's priority system — lanes are bitmasks that classify work priority (SyncLane, DefaultLane, TransitionLane, IdleLane). The scheduler picks the highest-priority lane to work on first.

Pro Tip

Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a React.js codebase.