Fiber Reconciler: Fiber Node Linked List, Work Loop, and Time Slicing
- Last updated
- Prerequisites:
- Virtual DOM concepts
- Browser Event Loop and call stack
- react
- fiber
- reconciler
- work-loop
- time-slicing
- concurrent
Read at your depth
The practical view
The Fiber Reconciler is React's core engine for updating the UI. Instead of recursive function calls (the old Stack reconciler), Fiber represents every component instance and DOM element as a mutable node in a singly-linked list tree (`child`, `sibling`, `return`). This enables **Time Slicing**: React splits rendering work into 5ms chunks, yielding control back to the browser between chunks to keep the page responsive to clicks and typing.
The same idea in other frameworks
Fiber linked list traversal with `child`, `sibling`, `return` pointers.LView and TView arrays traversed during change detection passes.Virtual DOM patch algorithm using recursive VNode tree diffing.Zero-tree direct DOM update instructions generated at compile time.Legacy vs modern
Recursive Stack Reconciler vs Fiber Linked List Work Loop
Stack reconciler blocked the call stack recursively until complete; Fiber walks a linked list in chunks and can pause execution.
function mountComponent() { children.forEach(c => c.mountComponent()); } // ❌ Uninterruptible recursionwhile (workInProgress !== null && !shouldYield()) { workInProgress = performUnitOfWork(workInProgress); } // ✅ NEWInterview gotchas
Context
Interviewers test your understanding of UI consistency and visual tearing.
The mechanical answer
The Render Phase only creates and mutates in-memory JavaScript objects (the `workInProgress` Fiber tree); pausing or discarding it has zero visible effect on the user. The Commit Phase, however, applies physical DOM mutations (`appendChild`, `removeChild`, attribute updates). If the Commit Phase were paused halfway through, the user would see a partially updated, broken UI (visual tearing). Therefore, the Commit Phase must execute synchronously from start to finish.
Trap
Never say that React modifies the real DOM during `beginWork` or `completeWork`. Real DOM mutations happen strictly in the Commit Phase.
Context
Tests knowledge of graphics rendering concepts applied to the Fiber architecture.
The mechanical answer
Similar to graphics engines swapping video frame buffers, React maintains two complete Fiber trees: the `current` tree (representing the DOM currently visible on screen) and the `workInProgress` tree (a draft tree being constructed during the render phase). Each fiber node has an `.alternate` pointer to its twin in the other tree. When rendering completes, React swaps a single pointer (`root.current = workInProgress`), making the draft tree the new current tree in an `O(1)` step.
Trap
React does not destroy and re-allocate the `current` tree from scratch; it recycles existing fiber nodes via the `alternate` pointer to reduce garbage collection pressure.