title: ReactJS checkable list issue
body: <p>I'm trying to create React component that contains a long list (~500 items) with checkboxes opposite each item. It should toggle checked state of each item and toggle checked state of all items in the list. I implemented that component, as I see that. But my solution has low performance and some time lag when I toggle checkbox. When I integrated that in page, it work slower than this jsFiddle example.</p>
  
  <p><a href="https://jsfiddle.net/jaxxreal/69z2wepo/14552/" rel="nofollow" title="JSfiddle link">jsFiddle</a></p>
  
  <p>What I'm doing wrong? Should I choose another way to work with items data?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Hello = React.createClass({
    getInitialState: function () {
      var db = [];
      for (var i = 0, l = 100; i &lt; l; i++) {
        db.push({
          name: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5),
          value: i
        });
      }
      return {
        db: db
      };
    },
    checkAll: function (ev) {
      var items = this.state.db.slice();
      items.forEach(function (v) {
        v.checked = ev.target.checked;
      });
      this.setState({db: items});
  
    },
    handleCheck: function (ev) {
      debugger;
      var id = ev.target.dataset.id;
      var items = this.state.db.slice();
      var item = items.filter(function (v) {
        return v.value == id;
      })[0];
      item.checked = ev.target.checked;
      console.log(items.filter(function (v) {
        return v.checked;
      }));
      this.state({db: items});
  
    },
    render: function () {
      return &lt;div&gt;
        &lt;table&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Value&lt;/th&gt;
            &lt;th&gt;
              &lt;input type="checkbox" onChange={this.handleCheck} id="check-all"/&gt;
              &lt;label htmlFor="check-all"&gt;Check all&lt;/label&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt; {
            this.state.db.map(function (v, i) {
              return (
                  &lt;tr key={i}&gt;
                    &lt;td&gt;{v.name}&lt;/td&gt;
                    &lt;td&gt;{v.value}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;input id={'item-'+i} type="checkbox"
                             data-id={i}
                             onChange={this.handleCheck}
                             checked={v.checked}/&gt;
                      &lt;label htmlFor={'item-'+i}&gt;Check this&lt;/label&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
              );
            }.bind(this))
          }
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;;
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>I have many cells in my table with complex hierarchy. When I toggle checkbox value, all cells rerendered, including ones with unchanged values, that causes huge time lag. I splited up my component to some small components with <code>shouldComponentUpdate</code> callbacks and that works fine. Thanks all for help!</p>