CODEWITHSUNDEEP
reactjsimmutabilityreact-props
Sparm
Sparm

Reputation: 566

React parent prop with nested array is mutated by spread copied state variable?

Consider the following:

type ObjectWithNestedArray = {
  array: { name: string }[];
};

const App = () => <Parent />;

const Parent = () => {
  const objWithNestedArray = { array: [{ name: "A" }] };
  return <Child objWithNestedArray={objWithNestedArray}></Child>;
};

const Child = (props: { objWithNestedArray: ObjectWithNestedArray }) => {
  const [stateObjWithNestedArray, setStateObjWithNestedArray] = useState<ObjectWithNestedArray>();
  const [count, setCount] = useState<number>(0);

  const onChange = () => {
    if (stateObjWithNestedArray) {
      //const copyOfObj = structuredClone(stateObjWithNestedArray) as ObjectWithNestedArray;
      const copyOfObj = { ...stateObjWithNestedArray };
      copyOfObj.array[0].name = "B";
    }
    setCount(count + 1);
  };

  useEffect(() => {
    if (props.objWithNestedArray) {
      setStateObjWithNestedArray((current) => props.objWithNestedArray);
    }
  }, [props.objWithNestedArray]);

  return (
    <div>
      <pre>obj={JSON.stringify(props.objWithNestedArray, null, 2)}</pre>
      <button onClick={() => onChange()}>Click me</button>
    </div>
  );
};

When I render my App I get:

propsFormDef={
  "array": [
    {
      "name": "A"
    }
  ]
}

However when I click the button it is somehow modifying the passed in property:

propsFormDef={
  "array": [
    {
      "name": "B"
    }
  ]
}

If I modify the line in the onChange to be the commented out one:

const copyOfObj = structuredClone(stateObjWithNestedArray) as ObjectWithNestedArray;

Then the prop value doesnt change.

Can someone explain how modifying a spread copy of a state variable changes the passed in property when there are no callbacks and props are supposed to be immutable in React?

Is it because the array in the passed in prop is passed by reference and similarly, the spread copy copies the reference so that when I change a value in that array, I'm actually modifying the original prop array's memory location?

Upvotes: 0

Views: 46

Answers (1)

WeDoTheBest4You
WeDoTheBest4You

Reputation: 1954

Let us discuss the same.

const obj = {
  array: [{ name: 'A' }],
};

const copyOfObj = { ...obj }; // spread operator in use

Observations:

a) The following check results in a false value. It shows that original and the newly created object by copying are entirely two different objects.

console.log(obj === copyOfObj);  // false

b) The following check results in true value. It shows although the original and the newly created object are entirely two different objects, the array object referenced in both of the two objects are the same.

console.log(obj.array === copyOfObj.array); // true

c) Therefore, the below assignment will mutate both objects, it means it will mutate the original object as well. Please see below the output.

copyOfObj.array[0] = 'B';

console.log(obj);       // {  array: [{ name: 'B' }], };
console.log(copyOfObj); // {  array: [{ name: 'B' }], };

Solution:

Instead of the spread operator, the function structuredClone may be used.

Please see below an example.

const obj = {
  array: [{ name: 'A' }],
};

const copyOfObj = structuredClone(obj);

Observations:

a) The following check results in a false value. It shows two objects are different.

console.log(obj === copyOfObj);  // false

b) The following check results in a false value. The array objects referenced in both of the two objects are not the same, it is different.

console.log(obj.array === copyOfObj.array); // false

c) Therefore, the below assignment will mutate not mutate the original object.

copyOfObj.array[0] = 'B';

console.log(obj);       // {  array: [{ name: 'A' }], };
console.log(copyOfObj); // {  array: [{ name: 'B' }], };

Upvotes: 1

Related Questions