What is the reconciliation algorithm and Fiber?
Answer
React Fiber is the complete rewrite of React's reconciliation engine, introduced in React 16. The original Stack reconciler processed the entire component tree synchronously in one pass — if it started, it could not be interrupted. This caused jank for large trees because JavaScript is single-threaded and a long synchronous task blocks the browser from handling user input or animations. Fiber's key innovation: incremental rendering. It breaks rendering work into small units called fibers (one per component) that can be paused, resumed, prioritized, and discarded. This enables: (1) Prioritized updates — user interactions are higher priority than background data fetches. (2) Concurrent rendering (React 18) — React can work on multiple versions of the UI at once, interrupting low-priority work for high-priority updates. (3) Time-slicing — React yields control back to the browser between fiber units to keep the UI responsive. (4) Suspense — pause rendering waiting for data. The Fiber tree mirrors the component tree and stores all the information needed to perform, pause, or retry work.
Previous
What is the difference between React.Component and React.PureComponent?
Next
What is the difference between defaultProps and default parameter values?