Updating Arrays in State

Updating arrays without mutation

In JavaScript, arrays are just another kind of object.Like with objects,you should treat arrays in React state as read-only. This means that you shouldn’t reassign items inside an array likearr[0] = 'bird', and you also shouldn’t use methods that mutate the array, such aspush() andpop().

Instead, every time you want to update an array, you’ll want to pass anew array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods likefilter() andmap(). Then you can set your state to the resulting new array.

Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:

Alternatively, you canuse Immer which lets you use methods from both columns.

Adding to an array

push() will mutate an array, which you don’t want:

Instead, create anew array which contains the existing itemsand a new item at the end. There are multiple ways to do this, but the easiest one is to use the...array spread syntax:

setArtists(// Replace the state
[// with a new array
...artists,// that contains all the old items
{id:nextId++,name:name}// and one new item at the end
]
);

Now it works correctly:

The array spread syntax also lets you prepend an item by placing itbefore the original...artists:

setArtists([
{id:nextId++,name:name},
...artists// Put old items at the end
]);

In this way, spread can do the job of bothpush() by adding to the end of an array andunshift() by adding to the beginning of an array. Try it in the sandbox above!

Removing from an array

The easiest way to remove an item from an array is tofilter it out. In other words, you will produce a new array that will not contain that item. To do this, use thefilter method, for example:

Click the “Delete” button a few times, and look at its click handler.

setArtists(
artists.filter(a=>a.id !==artist.id)
);

Here,artists.filter(a => a.id !== artist.id) means “create an array that consists of thoseartists whose IDs are different fromartist.id”. In other words, each artist’s “Delete” button will filterthat artist out of the array, and then request a re-render with the resulting array. Note thatfilter does not modify the original array.

Transforming an array

If you want to change some or all items of the array, you can usemap() to create anew array. The function you will pass tomap can decide what to do with each item, based on its data or its index (or both).

In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 50 pixels. It does this by producing a new array of data usingmap():

Replacing items in an array

It is particularly common to want to replace one or more items in an array. Assignments likearr[0] = 'bird' are mutating the original array, so instead you’ll want to usemap for this as well.

To replace an item, create a new array withmap. Inside yourmap call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:

Inserting into an array

Sometimes, you may want to insert an item at a particular position that’s neither at the beginning nor at the end. To do this, you can use the... array spread syntax together with theslice() method. Theslice() method lets you cut a “slice” of the array. To insert an item, you will create an array that spreads the slicebefore the insertion point, then the new item, and then the rest of the original array.

In this example, the Insert button always inserts at the index1:

Making other changes to an array

There are some things you can’t do with the spread syntax and non-mutating methods likemap() andfilter() alone. For example, you may want to reverse or sort an array. The JavaScriptreverse() andsort() methods are mutating the original array, so you can’t use them directly.

However, you can copy the array first, and then make changes to it.

For example:

Here, you use the[...list] spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods likenextList.reverse() ornextList.sort(), or even assign individual items withnextList[0] = "something".

However,even if you copy an array, you can’t mutate existing itemsinside of it directly. This is because copying is shallow—the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.

constnextList =[...list];
nextList[0].seen =true;// Problem: mutates list[0]
setList(nextList);

AlthoughnextList andlist are two different arrays,nextList[0] andlist[0] point to the same object. So by changingnextList[0].seen, you are also changinglist[0].seen. This is a state mutation, which you should avoid! You can solve this issue in a similar way toupdating nested JavaScript objects—by copying individual items you want to change instead of mutating them. Here’s how.

Updating objects inside arrays

Objects are notreally located “inside” arrays. They might appear to be “inside” in code, but each object in an array is a separate value, to which the array “points”. This is why you need to be careful when changing nested fields likelist[0]. Another person’s artwork list may point to the same element of the array!

When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level. Let’s see how this works.

In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:

The problem is in code like this:

constmyNextList =[...myList];
constartwork =myNextList.find(a=>a.id ===artworkId);
artwork.seen =nextSeen;// Problem: mutates an existing item
setMyList(myNextList);

Although themyNextList array itself is new, theitems themselves are the same as in the originalmyList array. So changingartwork.seen changes theoriginal artwork item. That artwork item is also inyourList, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.

You can usemap to substitute an old item with its updated version without mutation.

setMyList(myList.map(artwork=>{
if(artwork.id ===artworkId){
// Create a *new* object with changes
return{...artwork,seen:nextSeen};
}else{
// No changes
returnartwork;
}
}));

Here,... is the object spread syntax used tocreate a copy of an object.

With this approach, none of the existing state items are being mutated, and the bug is fixed:

In general,you should only mutate objects that you have just created. If you were inserting anew artwork, you could mutate it, but if you’re dealing with something that’s already in state, you need to make a copy.

Write concise update logic with Immer

Updating nested arrays without mutation can get a little bit repetitive.Just as with objects:

• Generally, you shouldn’t need to update state more than a couple of levels deep. If your state objects are very deep, you might want torestructure them differently so that they are flat.
• If you don’t want to change your state structure, you might prefer to useImmer, which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.

Here is the Art Bucket List example rewritten with Immer:

Note how with Immer,mutation likeartwork.seen = nextSeen is now okay:

updateMyTodos(draft=>{
constartwork =draft.find(a=>a.id ===artworkId);
artwork.seen =nextSeen;
});

This is because you’re not mutating theoriginal state, but you’re mutating a specialdraft object provided by Immer. Similarly, you can apply mutating methods likepush() andpop() to the content of thedraft.

Behind the scenes, Immer always constructs the next state from scratch according to the changes that you’ve done to thedraft. This keeps your event handlers very concise without ever mutating state.