title: How to add components to list dynamically in React with no redundant render?
body: <p><a href="https://codepen.io/anon/pen/aLdaGo" rel="noreferrer">Here is an online sample.</a></p>
  
  <pre><code>var FruitList = React.createClass({
        render : function() {
          return (
            &lt;div className="container"&gt;
              &lt;ul className="list-group text-center"&gt;
                {
                  Object.keys(this.props.fruits).map(function(key) {
                    count = count + 1;
                    return &lt;li className="list-group-item list-group-item-info"&gt;{this.props.fruits[key]+count}&lt;/li&gt;
                  }.bind(this))
                }
              &lt;/ul&gt;
             &lt;/div&gt;
           );
         }
       });
  </code></pre>
  
  <p>I want to add "Cherry" to list.
  <a href="https://i.stack.imgur.com/mw6Yy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mw6Yy.png" alt="before"></a></p>
  
  <p>As is, it redraws all items redundantly. I hope that orange1 and apple2 need to keep their state with no redraw redundantly. </p>
  
  <p>What the design for dynamic list components is better? 
  <a href="https://i.stack.imgur.com/gFaLj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gFaLj.png" alt="after"></a></p>