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.
Previous
How does React's reconciliation algorithm handle keys?
Next
What are React rendering optimizations beyond React.memo?
More React.js Questions
View all →- Advanced How does React's reconciliation algorithm handle keys?
- Advanced What are React rendering optimizations beyond React.memo?
- Advanced How do you implement an undo/redo system in React?
- Advanced What are React's concurrent features and how do Transitions work?
- Advanced How does React handle forms at scale?