React Fiber

1React Fiber is the complete rewrite of React's core reconciliation algorithm, introduced in React 16
2It enables asynchronous rendering by breaking rendering work into small units of computation called fibers
3Example: Instead of updating a large component tree all at once, React can pause rendering midway and continue later if needed
4These units are scheduled based on priority and can be paused, resumed, or aborted — enabling interruptible rendering
5Example: If a user types in a form while React is rendering, React can pause the ongoing render and prioritize the input first
6Fiber implements a cooperative scheduling model, allowing React to yield control to the browser between units of work
7This avoids blocking the main thread and ensures smoother UI transitions
8Time slicing is a technique enabled by Fiber to split rendering across multiple frames without freezing the UI
9Example: In a long list of items, React can render the first few items immediately and delay the rest without freezing the page
10React uses a priority queue to assign different lanes (priorities) to updates — such as user input, animations, or background data
11Example: React might delay a background data fetch in favor of handling a button click instantly
12Batching is optimized in Fiber — multiple updates are grouped together and committed in a single render phase
13Example: When calling setState multiple times in an event handler, React applies them all in one go rather than re-rendering after each call
14The Fiber tree is a data structure that mirrors the component tree and tracks the state and side effects of each component
15Each Fiber node holds information about the component type, props, state, and effects
16Example: When React renders <App />, it creates a corresponding Fiber node for <App /> and all its children
17React traverses the Fiber tree during the render phase and commits the minimal required changes in the commit phase
18Example: If only one component changes, React updates just that part of the DOM — not the whole tree
19Features like Suspense, Concurrent Mode, and Error Boundaries are made possible due to Fiber's architectural improvements
20Example: Suspense pauses rendering until data is ready, while Error Boundaries catch errors and prevent the entire app from crashing
21Fiber also improves error handling by enabling boundary-based error recovery without unmounting the whole tree
22Example: If one part of your component tree fails, only that part is replaced — the rest remains untouched
23Developers don't interact directly with Fiber — it runs internally and improves the responsiveness and scalability of React applications
24You write React code as usual, but benefit from smoother updates, better error handling, and more control over rendering