Depth-first search completes a node’s branch before moving to the next branch. In virtual-DOM reconciliation, this means comparing a node, then recursively comparing its children before continuing across sibling branches. section 7.2
A depth-first comparison follows a practical sequence:
- Compare the root nodes and their attributes or event listeners. section 7.2 section 7.2.1
- If the nodes differ, replace the old subtree instead of descending further. section 7.2
- Recursively compare child nodes, applying changes within the current branch before moving to the next branch. section 7.2 section 7.2.1
- Track additions, removals, moves, attribute changes, and text changes as the trees are traversed. section 7.2.1
Inserting a validation message
When an error paragraph appears between an input and a button, depth-first DOM patching handles the new node at child index 1 before continuing with later siblings. section 8.1
Figure 7.5 Comparing two virtual DOM trees to find out what changed
Use the comparison diagram to follow the seven detected changes as traversal moves through the virtual-DOM branches. section 7.2.1
