Summary
Each unit of work is a Fiber node (component instance + hooks list + child/sibling/return pointers). Work-in-progress tree doubles buffering for interruptible render. Hooks live on fiber — order must be stable across renders. Fiber enables concurrent features, error boundaries, and DevTools component tree. Legacy stack reconciler is gone in modern React.
Code example
// Fiber links: child → sibling → return (parent)
// Each component instance maps to one fiber node
function Component() {
const [count, setCount] = useState(0); // hook list on fiber
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
Key points
- Each unit of work is a Fiber node (component instance + hooks list + child/sibling/return pointers).
- Work-in-progress tree doubles buffering for interruptible render.
- Hooks live on fiber — order must be stable across renders.
- Fiber enables concurrent features, error boundaries, and DevTools component tree.
- Legacy stack reconciler is gone in modern React.