React Fiber
An Introduction to React Fiber
Fiber is the new reconciliation algorithm since React 16, a completely backward-compatible rewrite of the old reconciler (Stack Reconciler).
Purposes
- Improved performance by breaking the limits of the call stack. It allows dividing the work into multiple chunks & divide the rendering work over multiple frames. This lets it pause or restart work conditionally.
- Control over the priority of the work. Work being divided into smaller chunks mean we can essentially prioritize each chunk based on its context. E.g: Functions that originate from user actions should be processed before less-important background functions.
- Better suitability for advanced UI (animations, layouts & gestures) as a result of the priority control.
- … (some other new features)
By breaking up the work into smaller chunks that can be paused, resumed, or aborted based on a set priority order, React Fiber helps apps deliver a more fluid experience.
With the old Stack Reconciler, reconciliation and rendering work weren’t separated & performed synchronously without interruption. Render changes can only be inserted after current stack was cleared. This often resulted in lagging inputs and choppy frame rates.