CodeParkFiber is the reconciliation engine React has used since React 16. It is the part of React that works out what changed. It represents each component instance as a fiber node. A fiber node is a unit of work that holds the component's type, props and state, plus links to its parent, child and sibling.
The old engine walked the tree recursively and could not stop until it finished. Fiber processes work in a loop, one fiber at a time. This design makes it possible for React to:
- pause rendering
- give control back to the browser for urgent work, like typing
- resume later
- throw away work that became outdated
Updates can also get priorities, so urgent ones are handled first.
In React 16 and 17, rendering still ran from start to finish without stopping in practice. Rendering only became interruptible with the concurrent features in React 18. Examples are transitions (startTransition) and useDeferredValue. A transition is an update you mark as non-urgent.
Work happens in two phases:
- Render phase: React builds a work-in-progress tree. In concurrent rendering this phase can be interrupted and run again, which is why rendering must be pure.
- Commit phase: React applies the DOM changes in one synchronous step.
In short, Fiber is the foundation that makes concurrent features like transitions and Suspense possible.
- Reconciler rewrite introduced in React 16
- Each component is a fiber: a unit of work
- Rendering can be paused, resumed, prioritised or discarded
- Interruptible render phase, synchronous commit phase
- Foundation for transitions, Suspense and concurrent rendering