How to add new elements without re-rendering whole list with React
<p>I'm working on simple stream app. I have list of posts and this list can receive updates, which will display on top of it.</p>

<p>The problem is on each new post receive React rerenders the whole list of elements. I've made simple example for it.</p>

<p>Is there any way to avoid this behaviour?
I've seen the <strong><em>dynamic-children</em></strong> topic on React docs, but in example, as you see, I have all children updated anyway.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Post extends React.Component {
  render() {
    console.log('rerendered post', this.props.reactKey);
    return (
      &lt;li&gt;{this.props.post.text}&lt;/li&gt;
    );
  }
}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {posts: [
      {id: '00001', text: 'First one'},
      {id: '00002',text: 'Second one'},
      {id: '00003',text: 'Third one'}
    ]};
  }

  addPost() {
    const posts = this.state.posts;
    posts.unshift({id: '00004', text: 'New post'});
    this.setState({posts: posts});
  }

  render() {
    return (
      &lt;div&gt;
        &lt;button onClick={this.addPost.bind(this)}&gt;Add Post&lt;/button&gt;
        &lt;ul&gt;
          {this.state.posts.map((post, index) =&gt; {
            return (&lt;Post post={post} key={post.id} reactKey={index} /&gt;);
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
}


ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p><strong>The solution</strong></p>

<p>The problem was that I used index of .map function is a key for each list component instead of unique key. And because after adding new element to list all indexes changes to +1, so the first post becomes the second, all my posts have re-rendered.
So at first, check you use unique keys across all list elements :-)</p>