The Diffing Algorithm: Recursing On Children

//React will match the two <li>first</li> trees, match the two <li>second</li> trees, 
//and then insert the <li>third</li> tree.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference.

Related concepts

Recursing On Children

The Diffing Algorithm: Recursing On Children — Structure map

Clickable & Draggable!

The Diffing Algorithm: Recursing On Children — Related pages: