Handling state and arrays of objects in React

Question

We all know the React docs say to never mutate this.state directly. I guess I have a lingering question on state arrays and immutability:

If I have an array of objects held in state, should I always use the immutability helper as in this question when mutating that array in any way?

Or is it perfectly acceptable to use [].concat() or [].slice() as answered here and here?

I ask this question again because [].concat() and [].slice() 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):

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) // => true; both are "kevin"
(arr1[0] === arr2[0])           // => true; only shallow copy

// this changes arr2 only
arr2.push({ name : "alex" });

// check again
(arr1.length === arr2.length)   // => false;
(arr1[0].name === arr2[0].name) // => still true;
(arr1[0] === arr2[0])           // => still true;

I understand that the addon update is most commonly used when overriding shouldComponentUpdate, 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).

TL;DR

If not overriding shouldComponentUpdate, when should I use React.addons.update over [].slice() or [].concat() to mutate an array of objects stored in state?

Answer 1

You primarily need to consider boundaries. If you only use this array in the component that owns it, and optionally pass it down as props: it doesn't matter. You can modify it in any way, and unless the other components have some serious problems, they'll never know the difference because they get the new props when your component updates its state.

If you pass this array to some kind of api, such as a flux action creator or a function passed to you as a prop, then you might run into some very serious and hard to track down bugs. This is where immutability is important.

For example, in this case you might want to check some property of a person in the callback, however if it's possible for people[0].name to have changed, you have a race condition.

function savePeople(people){
  $.post('/people/update', people, function(resp){
    if (people[0].name === ...) {
      // ...
    }
  });
}