title: Preventing react from rendering unchanged componets into the virtual DOM
body: <p>I have written a simple treeview in typescript using react to render the DOM.</p>
  
  <p>Every node has to follow the simple interface.</p>
  
  <pre><code>interface INode {
      label: string;
      children: INode[];
  }
  </code></pre>
  
  <p>and the tree is then described by:</p>
  
  <pre><code>var tree = {
      label: "root",
      children: [
          {
              label: "node 1",
              children: [
                  {
                      label: "node 1.0",
                      children: []
                  },
                  {
                      label: "node 1.1",
                      children: []
                  }
              ]
          },
          {
              label: "node 2",
              children: []
          }
      ]
  };
  </code></pre>
  
  <p>Very simple. The components are now also very simple. For the Nodes I have:</p>
  
  <pre><code>class Node extends React.Component&lt;INode, void&gt;{
      render() {
          console.log(`Rendering ${this.props.label}`);
          var list = this.props.children.map((node, i) =&gt; &lt;li key={i}&gt;&lt;Node {...node}/&gt;&lt;/li&gt;);
          return (
              &lt;div&gt;
                  &lt;span&gt;{this.props.label}&lt;/span&gt;
                  {this.props.children.length &gt; 0 ? &lt;ul&gt;{list}&lt;/ul&gt; : ""}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>and for the root of the tree I use state instead of props. But after 1 second I refresh the state. But the state itself does not change:</p>
  
  <pre><code>class Root extends React.Component&lt;void, INode&gt;{
      constructor() {
          super();
          this.state = tree;
      }
  
      componentWillMount() {
          setTimeout(() =&gt; {
              this.setState((prevState: INode, props: void) =&gt; {
                  console.log(`Updating state of ${this.state.label}`);
                  return prevState;
              });
          }, 1000);
      }
  
      render() {
          var list = this.state.children.map((node, i) =&gt; &lt;li key={i}&gt;&lt;Node {...node} /&gt;&lt;/li&gt;);
          return (
              &lt;div&gt;
                  &lt;span&gt;{this.state.label}&lt;/span&gt;
                  {this.state.children.length &gt; 0 ? &lt;ul&gt;{list}&lt;/ul&gt; : ""}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>To run this app there is simply these lines of code:</p>
  
  <pre><code>ReactDOM.render(
      &lt;Root/&gt;,
      document.getElementById("app")
  );
  </code></pre>
  
  <p>The rendered html looks as it should. My problem now is when I look at the browser console I see</p>
  
  <blockquote>
    <p>Rendering node 1</p>
    
    <p>Rendering node 1.0</p>
    
    <p>Rendering node 1.1</p>
    
    <p>Rendering node 2</p>
    
    <p>Updating state of root</p>
    
    <p>Rendering node 1</p>
    
    <p>Rendering node 1.0</p>
    
    <p>Rendering node 1.1</p>
    
    <p>Rendering node 2</p>
  </blockquote>
  
  <p>The whole tree was rerended (into the virtual DOM) while the value of the state and the props of the children did not change. </p>
  
  <p>Assume the rendering process would be very complex and time consuming. Is there possibility to stop the rerendering of childrens into the virtual DOM?</p>