How React Determines Updates: The Difference Between Reconciliation and React Fiber

If you’ve ever clicked on a button on a webpage, you have triggered a change to the Document Object Model(DOM). React is a JavaScript library that renders components based on these changes, a process known as DOM manipulation. In this article, we will discuss how these triggers are used to update components in React.

React uses two types of DOM nodes: The Virtual DOM and the Real DOM. The virtual DOM is a clone of the Real DOM; the Real DOM is the Rendered DOM that you see when you visit a website.

DOM Manipulation
Whenever a change, such as a button click, is made to a component’s state, React creates a tree-like structure of all the components that need to be updated. It generates a new Virtual DOM, which is compared to the Real DOM using a technique called “snapshotting.” Based on the differences between these two versions of the DOM, React updates the rendered DOM accordingly. Importantly, the Virtual DOM is updated before the Real DOM, which reduces unnecessary updates and improves performance.

Reconciliation Algorithm
Before React version 16, the library used a process called the Reconciliation Algorithm to analyze the rendered DOM and the Virtual DOM. It traversed the DOM nodes and updated the DOM according to the class or element that needed to be updated. This process occurred after every User Interface (UI) update.

React Fiber
With version 16, React introduced an upgraded version of the Reconciliation Algorithm called React Fiber. It breaks down the tree-like structure discussed earlier into smaller units called fibers. This allows React Fiber to prioritize which unit of the tree needs to be updated first.

React Fiber introduces a concept called “reconciliation and rendering phases” to make the updating process more efficient. It breaks the updating process into two distinct phases:

1. Reconciliation Phase: React Fiber compares the old and new Virtual DOM and calculates the differences. It then breaks down the work into smaller units called fibers and prioritizes them based on their importance. During this phase, React can pause, abort, or even delegate work to another thread to keep the UI responsive.

2. Commit phase: Once the reconciliation phase is complete, React Fiber enters the commit phase. In this phase, it applies the changes to the actual DOM, updating only the necessary parts of the UI. This ensures that the user sees a consistent and updated UI as soon as possible.

In the earlier version of React, there was no provision to temporarily halt the traversal to process other renders in between. As a consequence, this often led to sluggish and unresponsive inputs, and caused the frame rates to be choppy.

Difference between Reconciliation and React Fiber
Here are the key differences between the Reconciliation Algorithm and React Fiber:

1. Rendering architecture: The old version of React used a stack-based architecture for rendering components, which caused performance issues in large applications. The React Fiber architecture was introduced to address these issues by introducing a more efficient fiber-based approach for rendering and prioritizing components.

2. Incremental rendering: React Fiber enables incremental rendering, which means that rendering can be broken down into smaller chunks, allowing the UI to be displayed more quickly. This also means that the UI can be updated more frequently, resulting in a more dynamic user experience.

3. Rendering priorities: React Fiber introduces the concept of rendering priorities, which allows developers to specify which parts of the UI should be rendered first, based on their importance. This ensures that critical parts of the UI are rendered first, resulting in a more responsive user interface.

4. Improved error handling: React Fiber includes improved error handling, which makes it easier to diagnose and fix issues in the UI. This is particularly important in larger applications where issues can be more complex.

5. Improved reconciliation: React Fiber includes an improved reconciliation algorithm, which is the process of comparing the current state of the UI with the new state and updating the UI accordingly. This improved algorithm makes the reconciliation process more efficient and results in faster UI updates.

Overall, React Fiber introduces significant improvements over the previous version of React, particularly in terms of rendering performance, prioritization, and error handling. These improvements result in a better user experience and make React a more powerful tool for building complex user interfaces.