Unveiling React Diff: How Virtual DOM Optimizes Rendering Performance

React diff, as a Virtual DOM accelerator, improves the algorithmic foundation of React's UI rendering and guarantees performance; it is also the most mysterious and astonishing part of React's source code. This article dissects the incredible aspects of React diff.

The most commendable part of React is the perfect combination of Virtual DOM and diff, especially its efficient diff algorithm, which lets users refresh pages freely without performance concerns, and developers need not worry about the inner workings because React diff computes the actual changes in the Virtual DOM and updates only those parts, not the entire page, ensuring efficient rendering. Thus Virtual DOM and diff are the behind‑the‑scenes drivers of React's performance reputation.

diff strategy

1. Cross‑level DOM node moves in Web UI are extremely rare and can be ignored. 2. Components of the same class generate similar tree structures, while components of different classes generate different tree structures. 3. Sibling nodes at the same level can be distinguished by a unique id.

Based on these three strategies, React optimizes tree diff, component diff, and element diff algorithms, and these premises have proven reasonable and accurate, guaranteeing overall interface construction performance.

tree diff

According to strategy one, React simplifies the tree algorithm by comparing nodes layer by layer, only comparing nodes at the same depth.

Since cross‑level DOM moves are negligible, React uses updateDepth to control the Virtual DOM tree hierarchy, comparing only nodes within the same parent. When a node no longer exists, it and its children are completely removed and not considered further. This allows a single traversal to compare the entire DOM tree.

If a cross‑level move occurs, the node is deleted from its original layer and recreated in the new layer, which is costly; therefore such moves are discouraged. Instead, CSS can hide or show nodes to simulate movement.

component diff

React builds applications based on components, and its comparison strategy for components is also simple and efficient.

If components are of the same type, the original strategy continues to compare the virtual DOM tree.

If they differ, the component is treated as a dirty component, and all its child nodes are replaced.

For components of the same type, the Virtual DOM may have no changes; knowing this can save a lot of diff computation time, so React allows developers to use shouldComponentUpdate() to decide whether a component needs diffing.

As shown in the figure, when component D changes to component G, even though the structures are similar, React determines they are different types and deletes component D, then creates component G and its children. Although different‑type components with similar structures can affect performance, such cases are rare in practice.

element diff

When nodes are at the same level, React diff provides three operations: INSERT_MARKUP (insert), MOVE_EXISTING (move), and REMOVE_NODE (remove).

INSERT_MARKUP : The new component type is not in the old collection, representing a brand‑new node that requires insertion.

MOVE_EXISTING : The new component type exists in the old collection and the element is updatable; generateComponentChildren calls receiveComponent, and prevChild equals nextChild, so the node can be moved and the previous DOM node reused.

REMOVE_NODE : The old component type exists in the new collection but with a different element, preventing reuse; it must be removed, or if the old component type is absent from the new collection, it also needs removal.

Developers can add unique indexes to sibling nodes at the same level; during diff, position‑only changes can be handled by moving elements, avoiding unnecessary deletions and creations.

Reference

https://zhuanlan.zhihu.com/p/20346379