title: React setState on array of objects rerenders every component
body: <p>I'm using React, and want to update array of objects in a state. The overall answer in internet was to use a similar approach to below:</p>
  
  <pre><code>const newState = this.state.elements.slice().concat({key: 'val'});
  this.setState({elements: newState});
  </code></pre>
  
  <p>But the problem I encountered with this issue is that when these data are binded into a render function and components, it re-renders every component.</p>
  
  <p>Example include (map is used from lodash to retrieve index while mapping):</p>
  
  <pre><code>render() {
    return (
      &lt;div&gt;
        {map(this.state.elements, (el, index) =&gt; &lt;Component key={`el-${index}`} el={el} /&gt;)}
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Even though, the array order doesn't change and the key's of the components doesnt change, everytime the state changes, it re-renders and mounts the component from scratch.</p>
  
  <p>Is there a possible best practice solution to this issue?</p>
  
  <p>Best,
  Y</p>