title: Handling state and arrays of objects in React
body: <p>We all know the React docs say to never mutate <code>this.state</code> directly. I guess I have a lingering question on state arrays and immutability:</p>
  
  <p>If I have an array of objects held in state, should I always use the <a href="http://facebook.github.io/react/docs/update.html" rel="nofollow noreferrer">immutability helper</a> as in <a href="https://stackoverflow.com/a/25008995/3780697">this question</a> when mutating that array in any way? </p>
  
  <p>Or is it perfectly acceptable to use <code>[].concat()</code> or <code>[].slice()</code> as answered <a href="https://stackoverflow.com/a/23967735/3780697">here</a> and <a href="https://stackoverflow.com/a/26254086/3780697">here</a>?</p>
  
  <p>I ask this question again because <code>[].concat()</code> and <code>[].slice()</code> do return new arrays, but only shallow copy arrays. If I change an element of the array, it will change the array in state as well, violating the first rule of Reactjs State (I've been watching too much FMA:Brotherhood):</p>
  
  <pre><code>var arr1 = [{ name : "bill" }, { name : "chet" }];
  var arr2 = arr1.slice();
  
  // this changes both arrays
  arr2[0].name = "kevin";
  
  // check
  (arr1[0].name === arr2[0].name) // =&gt; true; both are "kevin"
  (arr1[0] === arr2[0])           // =&gt; true; only shallow copy
  
  // this changes arr2 only
  arr2.push({ name : "alex" });
  
  // check again
  (arr1.length === arr2.length)   // =&gt; false;
  (arr1[0].name === arr2[0].name) // =&gt; still true;
  (arr1[0] === arr2[0])           // =&gt; still true;
  </code></pre>
  
  <p>I understand that the addon <code>update</code> is most commonly used when overriding <code>shouldComponentUpdate</code>, but for what I'm doing I don't need to override that function; I just need to mutate objects in the array held in state by either adding new elements to the array (solved using concat or slice), or by changing properties of existing elements (solved by using React.addons.update).</p>
  
  <p><strong>TL;DR</strong></p>
  
  <p>If not overriding <code>shouldComponentUpdate</code>, when should I use <code>React.addons.update</code> over <code>[].slice()</code> or <code>[].concat()</code> to mutate an array of objects stored in state? </p>