React Fiber

React Fiber

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