In ReactJS, when modifying an array should I modify the elements directly or make a shallow copy?

OctoPalmTree
December 2, 2023
181 views
0 votes
2 Answers

Modifying the first of item in an array – two ways:

one modifies the items directly
one creates a copy of the array

Which way is the correct way to do it?

const [testArray, setTestArray] = React.useState([{ name: 'value0' }, { name: 'value1' }]);

const handleTest = () => {
    setTestArray((prev) => {
        const firstItem = prev[0];
        const updatedFirstItem = { ...firstItem, name: 'newValue' };
        prev[0] = updatedFirstItem;
        return prev;
    });
};

const handleTest2 = () => {
    setTestArray((prev) => {
        const copyOfArray = [...prev];
        const firstItem = copyOfArray[0];
        const updatedFirstItem = { ...firstItem, name: 'newValue' };
        copyOfArray[0] = updatedFirstItem;
        return copyOfArray;
    });
};

From a purely "at the surface"… looking array and its values… both should return an array with the same values (to be clear, not talking about objects nor references in memory, just looking at the surface of an array and its values).

But from a Virtual DOM / and React reconciliation perspective, is there a preferred way to do this?

Answers

Chosen as BEST ANSWER

You want the second one - make a copy and then update the copy.

From the React docs:

State can hold any kind of JavaScript value, including objects. But you shouldn’t change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.

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 like arr[0] = 'bird', and you also shouldn’t use methods that mutate the array, such as push() and pop().

So when working with array objects - do the ones on the right column.

	avoid (mutates the array)	prefer (returns a new array)
adding	`push`, `unshift`	`concat`, `[...arr]` spread syntax (example)
removing	`pop`, `shift`, `splice`	`filter`, `slice` (example)
replacing	`splice`, `arr[i] = ...` assignment	`map` (example)
sorting	`reverse`, `sort`	copy the array first (example)

Here is the issue with the the first one. In the first one, you are returning prev but that refers to the same array object as the previous state + because you reassigned an item inside an array - a refresh will not be triggered.

Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.