title: React Fx.render performance in Diffing Algorithm
body: <p>im talking about Reconciliation in reactJS </p>
  
  <p>i read this section on React Documentation , react said -> When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.</p>
  
  <p>you can read this section ( <a href="https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm" rel="nofollow noreferrer">https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm</a>)</p>
  
  <p>now for check this, i create a codePen and implement two tree node element for render function in my component and also create a Button Tag for toggle between </p>
  
  <p>one render function have DIV tag for root of tree-node </p>
  
  <pre><code>render() { 
     return(&lt;div&gt; &lt;h1&gt; A element &lt;/h1&gt; &lt;/div&gt; );
   }
  </code></pre>
  
  <p>and the other is a SPAN tag</p>
  
  <pre><code>render() { 
     return(&lt;span&gt; &lt;h1&gt; B element &lt;/h1&gt; &lt;/span&gt; );
   }
  </code></pre>
  
  <p>react in this situation ( i read in React document ) , when component will update || change State , React will tear down the old tree and build the new tree from scratch. and When tearing down a tree, old DOM nodes are destroyed this lifecycle method fire</p>
  
  <pre><code>componentWillMount()
  componentDidMount()
  componentWillUnmount()
  </code></pre>
  
  <p>the last method happen because tearing down a tree and tree node destroyed</p>
  
  <p>now i create this code pen and log in console when this function fired
  i toggle state and update component with different root element for render method , but just this method fired => componentWillUpdate()</p>
  
  <p>why ? please say me , and help me about this performance case or give me some link or article , thanks</p>
  
  <p>code in this address . plz check console <a href="https://codepen.io/hamidrezanikoonia/pen/QmapEV?editors=1111" rel="nofollow noreferrer">https://codepen.io/hamidrezanikoonia/pen/QmapEV?editors=1111</a></p>