Fiber Architecture
Slap yourself if
You think Fiber is just a rewrite of the Virtual DOM or that it exists only to make React faster.
Why this exists
Fiber architecture exists to give React fine-grained control over rendering work: scheduling, prioritization, interruption, and resumption. It enables features like concurrent rendering, time slicing, and Suspense by turning rendering into incremental, interruptible units of work.
Mental model
Fiber turns the UI tree into a linked data structure where each node represents a unit of work. React can pause work on one Fiber, switch to another, and later resume where it left off. Rendering becomes a schedulable process instead of a single recursive pass.
- Each component instance is represented by a Fiber node.
- Fibers form a tree with parent, child, and sibling pointers.
- React walks the Fiber tree incrementally instead of recursively.
- Each Fiber represents a small unit of work that can be paused or resumed.
- Completed work is stored in a work-in-progress tree and committed later.
- Assuming render is synchronous and single-pass.
- Putting side effects in render logic, which may run multiple times.
- Misunderstanding that Fiber itself improves performance automatically.
- Reading mutable external state during render and causing tearing.
- Overusing memoization without understanding identity and scheduling.
Fiber is React’s internal architecture that represents the UI as incremental units of work. It allows React to pause, resume, prioritize, and abandon rendering work, enabling concurrency features like time slicing and Suspense.
- Fiber is the new Virtual DOM.
- Fiber makes React multi-threaded.
- Fiber automatically makes apps faster.
Deep dive
Premium deep dives include more internals, more scars.
Fiber nodes as units of work
- Linked-list tree structure
- Parent / child / sibling pointers
- Alternates and work-in-progress
Why Fiber exposes hidden concurrency bugs
Fiber doesn’t create concurrency bugs — it reveals them.
How Fiber-related misunderstandings cause bugs
- Side effects in render
- Identity instability
- Incorrect memoization
Tradeoffs: power vs complexity
Fiber trades a simple mental model for control over scheduling.
Performance implications of Fiber
Fiber improves responsiveness, not raw throughput.
Related terms
Reconciliation Algorithm
You think reconciliation is just 'diffing the Virtual DOM' or that React compares trees node-by-node exhaustively.
Concurrent Rendering
You think concurrent rendering means React renders in parallel threads or it always makes apps faster.
Time Slicing
You think time slicing is just 'splitting work' or the same thing as code splitting.
Scheduler priorities
You think priorities are just performance hints and not correctness boundaries.
Virtual DOM Diffing Complexity
You think React performs an optimal O(n log n) or O(n) diff of two arbitrary UI trees every render.
Tearing in concurrent UI
You assume a render either fully happens or doesn’t happen at all.