title: React: update one item in a list without recreating all items
body: <p>Let's say I have a list of 1000 items. And I rendering it with React, like this:</p>
  
  <pre><code>class Parent extends React.Component {
    render() {
      // this.state.list is a list of 1000 items
      return &lt;List list={this.state.list} /&gt;;
    }
  }
  
  class List extends React.Component {
    render() {
      // here we're looping through this.props.list and creating 1000 new Items
      var list = this.props.list.map(item =&gt; {
        return &lt;Item key={item.key} item={item} /&gt;;
      });
      return &lt;div&gt;{list}&lt;/div&gt;;
    }
  }
  
  class Item extends React.Component {
    shouldComponentUpdate() {
      // here I comparing old state/props with new
    }
    render() {
      // some rendering here...
    }
  }
  </code></pre>
  
  <p>With a relatively long list map() takes about 10-20ms and I can notice a small lag in the interface. </p>
  
  <p>Can I prevent recreation of 1000 React objects every time when I only need to update one?</p>