React Virtual DOM is SLOW, try Million.js

Virtual DOM is an important feature in React that enables reactivity, but at the same time, it can be a performance bottleneck. The MillionJs library helps to mitigate this and can boost React performance by up to 70%.

One thing we must realize is that React is popular not because it’s fast. I discussed this in detail in my previous article, so make sure you check it out first. The number one factor that causes slow performance issues in React is the virtual DOM bottleneck. That’s why the community has started building a lot of React extension frameworks/libraries, such as Preact and SolidJs, that have different approaches to optimize rendering.

However, these frameworks require additional knowledge, code migration, and have some feature limitations. They also have smaller communities compared to React.

How Virtual DOM works?

React utilizes a Virtual DOM (Document Object Model) as an in-memory representation of the actual DOM. The Virtual DOM serves as a lightweight copy of the real DOM, consisting of a hierarchical tree structure of HTML elements, and is used for efficient updates of the actual DOM.

Whenever a component’s state or props change, React generates a new Virtual DOM representation of the component’s user interface (UI). This fresh Virtual DOM is then compared to the previous Virtual DOM, aiming to identify the minimum set of changes required to update the actual DOM. This process is known as reconciliation.

Reconciliation involves comparing the new Virtual DOM tree with the previous one and pinpointing the differences between them. React subsequently calculates the minimal set of changes necessary to update the actual DOM and applies these modifications accordingly.

To execute the reconciliation process, React employs a diffing algorithm that traverses both Virtual DOM trees and compares the nodes at each level. This algorithm discerns discrepancies between the two trees, such as nodes being added or removed, and subsequently updates the actual DOM accordingly.

React streamlines the reconciliation process by minimizing the number of updates required for the DOM. For instance, it may bundle multiple updates together or utilize a concept called “key”…