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.