title: React.js: shouldComponentUpdate in array of stateless child Components
body: <p>I have a parent React class (<code>&lt;EventList /&gt;</code>) that contains an object that store's it's Child Component's (<code>&lt;Event /&gt;</code>) data. I've omitted many of the functions for the sake of brevity.</p>
  
  <h3>Background on the State of the <code>EventList</code></h3>
  
  <pre><code>/**
   * The events state looks like this before the EventList component is rendered:
   *
   * var events = {
   *      1: {
   *          id: 1,
   *          title: "Some title"
   *      },
   *      2: {
   *          id: 2,
   *          title: "Some other title"
   *      },
   *
   *      ...
   * };
   */
  </code></pre>
  
  <h3>Event.jsx</h3>
  
  <pre><code>var Event = React.createClass({
  
      /**
       * Pass up the ID of the Event and the new value of the Event's Title
       */
      _handleChange: function (e) {
          this.props.handleChange(this.props.id, e.target.value);
      },
  
      render: function () {
          return (
              &lt;div className="event"&gt;
                  &lt;input type="text" value={this.props.title} onChange={this._handleChange} /&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <h3>EventList.jsx</h3>
  
  <pre><code>var EventList = React.createClass({
  
      propTypes: {
          events: React.PropTypes.object
      },
  
  
      /**
       * Update the State of an event who's title has changed
       */
      _handleChange: function (id, title) {
          var newState = React.addons.update(this.state.events[id].title, {
              $set: title
          });
  
          this.setState(newState);
      },
  
      render: function () {
  
          var renderedEvents = Object.keys(this.state.events).map(function (id) {
              var event = this.state.events[id];
              return &lt;Event key={event.id} title={event.title} handleChange={this._handleChange}/&gt;;
          }, this);
  
          return (
              &lt;div className="events"&gt;
                  {renderedEvents}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>
  
  <p>Now this is fine, and it works. The state of the title gets updated and everything renders and re-renders successfully; but that's also the problem:</p>
  
  <h2>Everything re-renders!</h2>
  
  <p>It's not bad with a few events in the list, but once there's a good number of them the re-render takes a huge performance toll as the <code>EventList</code> render function goes through and populates a new array of <code>&lt;Event /&gt;</code> components. </p>
  
  <p>One thing I'd like to be able to do (though assume it'll require a complete restructuring of the application) is to be able to utilize <code>shouldComponentUpdate</code> within the <code>&lt;Event /&gt;</code> component.</p>
  
  <p>However, with my current relationship I can't do this. If you take a look at the default params for <code>shouldComponentUpdate</code>: </p>
  
  <pre><code>shouldComponentUpdate: function(nextProps, nextState) {...},
  </code></pre>
  
  <p>You'll notice that at the <code>&lt;Event /&gt;</code> level, <code>this.props</code> will always equal <code>nextProps</code>, so trying to do something like:</p>
  
  <pre><code>shouldComponentUpdate: function(nextProps, nextState) {
      return this.props !== nextProps; 
  },
  </code></pre>
  
  <p>will always return <code>false</code> because at this point in the flow of things they are pointing to the exact same set of data. <code>nextState</code> of course does not exist at the <code>&lt;Event /&gt;</code> level.</p>
  
  <p>So my question is, what do I need to do to get rid of the terribly costly re-render at the <code>&lt;EventList /&gt;</code> level?</p>