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.