React shallow compare works with multiple times?

Question

According to In Redux, is it necessary to do deep copy, to handle updates of nested objects, we should make multiple shallow copies, instead of deep copy.

And according to Redux documentation,

Redux's use of shallow equality checking requires immutability if any connected components are to be updated correctly. To see why, we need to understand the difference between shallow and deep equality checking in JavaScript.

So I have two questions.

1. Is that shallow equality checking meaning that multiple shallow equality checking on nested objects which is made with multiple shallow copy? If not, how can just one shallow equality detects deep-nested object's immutability correctly?

2. According to https://redux.js.org/faq/performance#do-i-have-to-deep-clone-my-state-in-a-reducer-isnt-copying-my-state-going-to-be-slow, shallow copy is faster than deep copy, so insist not to use deep copy. I understand that. But we have to use shallow copy multiple times to maintain immutability of nested objects. So isn't that multiple times of shallow copy and deep copy are in the same performance regards to immutability?

Answer 1

This means that only updated parts of the state need to be copied. if state.foo needs to be updated, there should be selective shallow copies:

{
  foo: {...prevState.foo, newValue},
  bar
}

Not a deep copy of whole state:

{
  foo: {...prevState.foo, newValue},
  bar: {...prevState.bar}
}

This results in better performance and allows to assume that parts of a state that pass shallow equality check weren't changed like prevState.bar === newState.bar.