What is a Fiber in React Fiber architecture?

WHAT THIS TESTS: This question tests whether you understand React's reconciliation internals at the data-structure level, not just the public component API. The interviewer wants to see that you know Fiber is the architecture enabling incremental rendering, and that you can describe the specific node properties and pointer relationships that make pausable, resumable traversal possible. Senior candidates are expected to move beyond surface-level definitions and articulate how the reconciler schedules and commits work using a linked-list tree.

A GOOD ANSWER COVERS: First, define a Fiber as a unit of work that corresponds to a component instance or a host node. Second, list its key fields in plain terms: type and key identify the component; child points to the first child node; sibling points to the next sibling; return points to the parent; alternate links the current fiber to its work-in-progress counterpart; and effectTag marks side effects such as placement, update, or deletion. Third, explain the traversal model: because each fiber knows its first child, next sibling, and parent, React can walk the tree incrementally using a linked-list structure rather than a recursive call stack, which allows the renderer to pause work after a chunk and resume later. Fourth, describe the dual-tree architecture: the current tree is what is on screen, and the work-in-progress tree is built during reconciliation; the alternate pointer connects each node between these two trees, enabling React to swap them atomically once work is complete.

COMMON WRONG ANSWERS: A major red flag is describing a Fiber as a web worker, thread, or physical CPU fiber. Another is conflating Fiber with the virtual DOM or saying it is just a new name for the diffing algorithm without mentioning the unit-of-work data structure. Candidates who omit the child, sibling, and return pointer model or who cannot explain why linked lists matter for incremental rendering signal that they have memorized buzzwords without understanding the architecture.

LIKELY FOLLOW-UPS: The interviewer may ask how React prioritizes different types of updates, or how the work loop decides when to yield control back to the browser. They might also ask you to contrast the legacy recursive reconciliation with the iterative Fiber approach, or to explain how error boundaries and Suspense are implemented using the return pointer and effect list.

ONE CONCRETE EXAMPLE: Imagine a component tree where a parent renders three children. In the Fiber architecture, the parent fiber has a child pointer to the first child. That first child has a sibling pointer to the second child, which has a sibling pointer to the third child. Each child has a return pointer back to the parent. When React begins reconciling this tree, it creates alternate fibers for each node, forming a mirrored work-in-progress tree. If a high-priority update arrives while React is traversing the second child, it can save its current position using the sibling and return pointers, yield to the browser, and later resume exactly where it left off.