The Diffing Algorithm: Elements Of Different Types

//this will destroy the old Counter and remount a new one

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. When tearing down a tree, old DOM nodes are destroyed. Component instances receive componentWillUnmount(). When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive componentWillMount() and then componentDidMount(). Any state associated with the old tree is lost.

Related concepts

Elements Of Different Types

The Diffing Algorithm: Elements Of Different Types — Structure map

Clickable & Draggable!

The Diffing Algorithm: Elements Of Different Types — Related pages: