title: ”Wasted time" shown by React.addons.Perf.printWasted
body: <p>In this code, <code>printWasted</code> prints <code>Wasted time</code> when <code>add</code> button is clicked.</p>
  
  <pre><code>var App = React.createClass({
      getInitialState: function() {
          return {
              count: 10
          };
      },
      onClick: function() {
          Perf.start();
          this.setState({count: this.state.count + 1}, function() {
              setTimeout(function() {
                  Perf.stop();
                  Perf.printWasted();
                  Perf.printDOM();
              }, 0);
          });
      },
      render: function() {
          var messages = [];
          for (var i = this.state.count; i &gt; 0; --i) {
              messages.push({id: i, body: 'message:' + i});
          }
          return (
              &lt;div&gt;
                  &lt;button onClick={this.onClick}&gt;add&lt;/button&gt;
                  &lt;div&gt;
                      {messages.map(function(message, index) { return &lt;Message key={index} message={message.body} /&gt;})}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  var Message = React.createClass({
      componentWillMount: function() {
          for (var i = 0; i &lt; 1000000; ++i) {}
      },
      render: function() {
          return (
              &lt;div&gt;{this.props.message}&lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/koba04/0xnLdh7j/1/" rel="nofollow noreferrer">https://jsfiddle.net/koba04/0xnLdh7j/1/</a></p>
  
  <pre><code>(index) Owner &gt; component Wasted time (ms) Instances
  0   "App &gt; Message" 1.3059999982942827  1
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tCHzA.png" alt="result of printWasted"></p>
  
  <p>I think <code>printWasted</code> prints only components that didn't actually render anything.</p>
  
  <p>In this code, According to the result of <code>printDOM</code>, It seems all Message components mutate the DOM.</p>
  
  <p>Why does <code>printWasted</code> print the <code>Wasted time</code>?
  What is this <code>Wasted time</code>?</p>