title: ReactJS render time of list increases each time new elements pushed into the list
body: <p>I am trying to render a list of items with react js. Since my list items relatively complicated I have created a simple fiddle to state my problem.</p>
  
  <p><a href="https://jsfiddle.net/zq3cz9e1/" rel="nofollow">fiddle</a></p>
  
  <p>In my case I have an infinite scroll of posts and increasing render time with each push of posts going out of reasonable render times really quick. it starts with 200-250 ms and goes up to 500ms after like 10 pushes (each push has 0-10 posts).</p>
  
  <p>How can I fix the render time of newly added items? or is it just how the react js work. </p>
  
  <p>Here is my main ReactComponent simplified.</p>
  
  <pre><code>React.createClass({
      shouldComponentUpdate: function (nextProps, nextState) {
          return nextState.posts.length !== this.state.posts.length;
      },
      getInitialState: function () {
          return {
              posts: []
          };
      },
      // getStream is bound to a scroll event handler. Simply, this function is called when user gets close to the end of page.
      getStream: function () {
          var self = this;
          ... ajax call success: (jsonResult) ...
          self.setState({
              posts: React.addons.update(self.state.posts, { $push: jsonResult })
          });
          ... end ....
      },
      render: function () {
          var self = this;
  
          var postNode = this.state.posts.map(function (post, i) {
              if (post.isActivity) {
                  return (&lt;ReactActivity key={i}&gt;&lt;/ReactActivity&gt;);
              }
              else {
                  return (&lt;ReactStreamPost key={i}&gt;&lt;/ReactStreamPost&gt;);
              }
          });
  
          return (&lt;div&gt;
              {postNode}
          &lt;/div&gt;);
      }
      });
  </code></pre>
  
  <p>And ReactStreamPost and ReactStreamActivity can be stateless components at this point. like</p>
  
  <pre><code>var ReactStreamPost = React.createClass({
      shouldComponentUpdate: function () {
          return false;
      },
      render: function () {
          return (
              &lt;div className="stream-post"&gt;
                  &lt;div className="post-topbar"&gt;
                      &lt;a href="#" className="display-name"&gt;Test USER&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div className="post-inner-wrapper"&gt;
                      &lt;div className="post-owner-big"&gt;
                          &lt;div className="post-owner"&gt;
                              &lt;img className="profile-img" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="post-content"&gt;
                          &lt;div className="post-header"&gt;
                              &lt;div className="post-owner"&gt;
                                  &lt;img className="profile-img" /&gt;
                              &lt;/div&gt;
                              &lt;div className="post-agt"&gt;
                                  &lt;ReactAutoGenerateTitle&gt;&lt;/ReactAutoGenerateTitle&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="post-title"&gt;
                              &lt;div&gt;
                                  &lt;a href="#" className="display-name"&gt;Test USER&lt;/a&gt;&lt;span&gt; Post title&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="attachments"&gt;
                              attachments
                          &lt;/div&gt;
  
                          &lt;div className="post-actions"&gt;
                              &lt;div className="left-actions"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;i className="icon icon-add-info"&gt;&lt;/i&gt;&lt;span&gt;Add info&lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div className="right-actions"&gt;
                                  &lt;a href="#" className="toggler"&gt;
                                      &lt;i className="icon"&gt;&lt;/i&gt;
                                      &lt;span&gt;x&lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;a href="#" className="toggler"&gt;
                                      &lt;i className="icon"&gt;&lt;/i&gt;
                                      &lt;span&gt;x&lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;a href="#" className="share icon icon-share"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className="post-comments"&gt;
                              &lt;div className="comment-block"&gt;
                                  &lt;div className="commentor"&gt;
                                      &lt;img /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="comment"&gt;
                                      &lt;a href="#"&gt;Test USER&lt;/a&gt;&lt;span&gt;: &lt;/span&gt;&lt;span&gt;Comment test&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;div className="comment-date"&gt;
                                      &lt;span&gt;comment date&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                              &lt;div className="comment-form"&gt;
                                  &lt;div className="commentor"&gt;
                                      &lt;img /&gt;
                                  &lt;/div&gt;
                                  &lt;div className="text-area"&gt;
                                      &lt;textarea rows="1" className="small"&gt;&lt;/textarea&gt;
                                  &lt;/div&gt;
                                  &lt;div className="submit-comment"&gt;
                                      &lt;a href="#" className="icon icon-send"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="post-date"&gt;
                      &lt;span&gt;post date&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>