React Fiber, Reconciliation, and Virtual DOM: An In-Depth Overview

React is a popular JavaScript library for building user interfaces. At its core lies a mechanism that tracks changes in a component state and projects the updated state to the screen. This process is known as reconciliation. In this article, we will delve into the details of React's new architecture called Fiber, the reconciliation algorithm, and the Virtual DOM.

React Fiber Architecture

React Fiber is a new reconciliation engine introduced in React 16. Its primary goal is to enable incremental rendering of the Virtual DOM. This architecture is designed to make the reconciler asynchronous and smarter by executing work on the basis of priority.

Virtual DOM

The Virtual DOM (VDOM) is a programming concept where an ideal, or "virtual," representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation. The Virtual DOM is a simplified, lightweight representation of the actual Document Object Model (DOM) of a web page. When a user interacts with a web page built with React, the Virtual DOM is updated first, and then React determines what changes need to be made to the actual DOM to reflect the updated Virtual DOM.

Reconciliation Process

The reconciliation process involves two main phases: the render phase and the commit phase.

1. Render Phase: In this phase, React builds a Work In Progress (WIP) Tree using fibers. The WIP Tree is built asynchronously and can be paused if the main thread has other work to complete. Once the main thread is idle again, it resumes building the WIP Tree where it left off.

2. Commit Phase: In this phase, React makes the necessary changes to the DOM. This phase is synchronous and cannot be interrupted. React swaps pointers of the Current Tree and Work In Progress Tree and then flushes the fibers to the DOM.

Fiber Tree

The Fiber Tree is the internal algorithm that React uses to manage the order and priority of updates to the Virtual DOM. Fiber works by breaking down the work of updating the Virtual DOM into smaller, prioritized chunks or "fibers," which can be processed incrementally by the browser's rendering engine. This allows React to prioritize important updates, such as user interactions or animations, while still ensuring that less critical updates are eventually processed.

Priority List

React Fiber gives different importance to different updates and executes them according to their priority. The priority list includes:

- No Work: No work is pending.

- SynchronousPriority: For controlled text inputs and synchronous side effects.

- TaskPriority: Needs to be completed at the end of the current tick.

- AnimationPriority: Needs to be completed before the next frame.

- HighPriority: Interaction that needs to be completed pretty soon to feel responsive.

- LowPriority: Data fetching or results from updating stores.

- OffscreenPriority: Won't be visible but do the work in case it becomes visible[2][5].

Conclusion

In summary, React Fiber is a new reconciliation engine that enables incremental rendering of the Virtual DOM. The Virtual DOM is a simplified representation of the actual DOM that is updated first, and then React determines what changes need to be made to the actual DOM. The reconciliation process involves two phases: the render phase, which is asynchronous, and the commit phase, which is synchronous. React Fiber manages the order and priority of updates to the Virtual DOM using a priority list, ensuring that important updates are processed first.

References

- [1] GitHub: https://github.com/acdlite/react-fiber-architecture

- [2] LogRocket: https://blog.logrocket.com/deep-dive-react-fiber