title: React/Redux rendering a list that's updating every second
body: <p>I have a react component that receives props from the redux store every second. The new state has an array that's different than the last array. To be specific, every second an element is added to the array. For example:
  in one state the array is:</p>
  
  <p>[1, 2, 3, 4, 5, 6]</p>
  
  <p>the next state</p>
  
  <p>[1, 2, 3, 4, 5, 6, 7]</p>
  
  <p>My reducer:</p>
  
  <pre><code>return {
    ...state,
    myList: [ payload, ...state.myList.filter(item =&gt; payload.id !== item.id).slice(0, -1) ]
  }
  </code></pre>
  
  <p>Now, in my react component I am subscribing to this state and for every change, the list is re-rendered.</p>
  
  <pre><code>import React, { Component } from 'react';
  import MyRow from './MyRow';
  
  class MyList extends Component {
  
      render() {
  
          return (
  
          &lt;div&gt;
  
              {this.props.myList.map((list, index) =&gt; (
                  &lt;MyRow key={list.id} data={list}/&gt;
              ))}
  
          &lt;/div&gt;
  
          );
      }
  }
  
  function select({ myList }) {
      return { myList };
  }
  
  export default connect(select)(MyList);
  </code></pre>
  
  <p>In MyRow.js</p>
  
  <pre><code>import { PureComponent } from 'react';
  
  class MyRow extends PureComponent {
  
      render() {
  
      const data = this.props.data;
  
          return (
              &lt;div&gt;
                  {data.id} - {data.name}
              &lt;/div&gt;
          );
  
      }
  }
  export default MyRow;
  </code></pre>
  
  <p>Now, my problem is: It's costly for me to re-render every element that has been already rendered. The MyRow heavily uses styled components and other expensive operations.
  This is causing react to re-render the whole list every second when the state is updated. This gets worst if updates come in less than 1 seconds, like 4 updates per second. The react app simply crashes in this case.</p>
  
  <p>Is there any way to only add the newly added item to the list and not re-render the whole list?</p>
  
  <p>Thanks</p>