Unveiling React Diff: How Virtual DOM Powers Lightning‑Fast UI Rendering

React diff, as the accelerator of the Virtual DOM, improves the algorithm that underpins React’s entire UI rendering and guarantees performance; it is also the most mysterious and astonishing part of React’s source code, and this article dissects its wonders.

The most commendable aspect of React is the seamless integration of Virtual DOM and diff, especially the highly efficient diff algorithm, which lets users refresh pages freely without worrying about performance, and frees developers from understanding the inner workings because React diff calculates the truly changed parts of the Virtual DOM and applies real DOM operations only to those parts, avoiding a full re‑render and ensuring high‑efficiency updates. Thus Virtual DOM and diff are the hidden drivers of React’s performance reputation.

Diff Strategies

Cross‑level node moves in Web UI are extremely rare and can be ignored.

Components of the same class generate similar tree structures, while components of different classes generate different trees.

Sibling nodes at the same level can be distinguished by a unique id.

These three premises allow React to optimize tree diff, component diff, and element diff respectively; practical experience confirms that they are reasonable and accurate, guaranteeing overall interface construction performance.

Tree Diff

Based on the first strategy, React simplifies the tree algorithm by performing a layer‑by‑layer comparison, comparing only nodes at the same depth.

Because cross‑level moves are negligible, React uses updateDepth to control the Virtual DOM hierarchy, comparing only nodes within the same parent (the “same colored box”). When a node no longer exists, that node and its subtree are completely removed and excluded from further comparison, allowing the entire DOM tree to be compared with a single traversal.

If a cross‑level move does occur, the node is removed from its original tree and recreated in the new layer, which incurs a high performance cost; therefore such moves are discouraged. Instead, hiding and showing nodes via CSS can replace cross‑level moves.

Component Diff

React builds applications based on components, and its strategy for comparing components is also concise and efficient.

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

If they differ, the component is marked as a dirty component, and the entire subtree under it is replaced.

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

As illustrated, when component D changes to component G, even though the two structures are similar, once React determines they are different types it deletes component D and creates component G and its children anew. Although different‑type but similar‑structure components can affect performance, React’s official blog notes that such cases are rare and have minimal impact in practice.

Element Diff

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

INSERT_MARKUP : a new component type not present in the old collection, i.e., a brand‑new node that requires insertion.

MOVE_EXISTING : the component type exists in the old collection and the element is updatable; generateComponentChildren calls receiveComponent, and when prevChild = nextChild a move operation reuses the previous DOM node.

REMOVE_NODE : the old component type also appears in the new collection but with a different element, so it cannot be reused and must be deleted; likewise, if the old component is absent from the new collection, it must be removed.

Developers can assign a unique index to sibling nodes at the same level; during diff, if only the position changes, the element can be moved without deletion and recreation, avoiding redundant operations.

Reference

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