React Fiber Architecture
The problem
The original reconciliation algorithm walked the virtual DOM tree recursively and couldn't be paused once started — a large update could block the main thread long enough to make typing or animation visibly stutter, with no way to interrupt the work partway through to handle something more urgent.
Why now
The virtual DOM and reconciliation already established diffing as a tree-walk, but treated that walk as an uninterruptible unit. Fiber is a rewrite of that walk into a different shape — a linked-list-like structure over the tree, from graph-theory-basics' vocabulary — specifically so the walk can be paused, resumed, and prioritized instead of running to completion in one blocking pass.
Mental model
A fiber is a unit of work corresponding to one component, linked to its parent, children, and siblings — instead of one big recursive function call stack, React can process one fiber, check if there's more urgent work waiting, and either continue or yield back to the browser, resuming exactly where it left off later. This is cooperative scheduling applied to rendering: the tree-walk becomes interruptible because it's represented as data (a linked structure to traverse manually) instead of as an implicit call stack.
Requires
- The Virtual DOM & ReconciliationReact
Fiber is a re-architecture of exactly the tree-diffing process reconciliation already covers; you need the original recursive diffing model in mind as the thing being reworked into an interruptible, resumable form.
Helps
- Graph Theory BasicsMathematical Thinking
A fiber tree is a specific linked representation of the component tree (parent/child/sibling pointers walked manually instead of via the call stack); the general tree/graph vocabulary makes that representation immediately legible.
Unlocks
Used in
- React's internal reconciler since React 16, replacing the original 'stack reconciler'
- Concurrent rendering and Suspense, both built directly on Fiber's interruptible work model
- Prioritizing urgent updates (a keystroke) over less urgent ones (a large list re-render) mid-render
- Explaining why React can now abandon an in-progress render entirely if a higher-priority update arrives
Projects
- Read React's source-level description of a fiber node's fields (return, child, sibling) and diagram how a small component tree maps onto that linked structure
- Explain, in your own words, why a recursive tree walk using the call stack cannot be paused and resumed, while a manually-walked linked structure can
Examples
- A large list re-render can be paused mid-way to handle an urgent keystroke update, then resumed from exactly the fiber it left off at, instead of blocking the keystroke until the whole list finishes
- React abandoning a stale in-progress render when a newer update supersedes it is only possible because the work is represented as resumable/discardable fiber data, not a live call stack
Resources
Mastery checklist
- I can explain what a fiber is and how it differs from a plain recursive tree walk
- I can explain why Fiber's linked structure makes rendering interruptible
- I can explain the relationship between Fiber and the original 'stack reconciler'
- I can explain why interruptibility matters for keeping an app responsive during large updates