React 中的 State 突变 - 需要解释

Question

I'm trying to understand something about React's state, deep copying of objects in JavaScript and non-mutations in functional programming in general and feel very confused at the moment due some example I ran into. It's better to show one time rather to explain a thousand times, so:

let arr = [
    {
        id: "a1",
        data: [
            {id: "a1b1", value: "value of a1b1"},
            {id: "a1b2", value: "value of a1b2"},
        ]
    },
    {
        id: "a2",
        data: [
            {id: "a2b1", value: "value of a2b1"},
            {id: "a2b2", value: "value of a2b2"},
        ]
    }
]

let arr2 = [...arr]
let new1 = arr2.find(item => item.id === "a2")
let new2 = new1.data.find(item => item.id === "a2b2")
new2.id = '4'

Now, because the ... operator doesn't deep copy arr , the arr will be mutated as well as the arr2 in terms of modifying the new2.id .

But in React, even if I do the same thing, but with arr being a state, the state won't get mutated... Can anyone please explain to me why this is happening and what is the appropriate way to deal with cases like this(should I deep copy, should I do something else instead?)

** Just to be more clear here, I of course do setState when I update the state and follow the React rules

Answer 1

react does not work on deep reference comparison. So, the moment you change the reference by doing [...arr] react considers it a change and updates everything dependent on it.

Also, as you mentioned that react state will not be mutated; I do not agree with it.. it will be mutated.