What is a Fiber in React Fiber architecture?
Tests reconciler internals. Strong answers define a Fiber as a unit of work with child, sibling, return, and alternate pointers; explain the linked-list tree enables incremental traversal; and note alternate connects current and work-in-progress trees.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
Which structural property of Fiber nodes directly enables React to pause reconciliation and resume it later without using the call stack?
- a.The alternate pointer links each node to its work-in-progress counterpart for atomic tree swapping
- b.The child, sibling, and return pointers form a linked list enabling iterative tree traversalCorrect
- c.Fibers are distributed across web workers to process branches in parallel without blocking the main thread
- d.The effectTag field stores priority levels that tell the scheduler which fibers to skip
Why? this is the answer
The child, sibling, and return pointers create a linked-list structure that replaces recursive stack traversal, allowing React to pause and resume work between frames. While option A correctly describes the alternate pointer's role in the dual-tree architecture, that mechanism supports atomic tree swapping rather than incremental traversal.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
- #react
- #fiber
- #reconciliation
- #internals
- #data-structures
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles