Take this example of state:

const [state, setState] = useState({ x: 1, nested: { y: 2, z: 3 } });

The immutable version of a handler to increment the value of y would be as follows:

function incrementY() {
    setState((state) => {
      return { ...state, nested: { ...state.nested, y: state.nested.y + 1 } };
    });
}

The next version creates a new state object, but mutates the nested object:

function incrementY() {
    setState((state) => {
      state.nested.y += 1;
      return { ...state };
    });
}

Both versions will lead to a re-render of the component. Now, let's assume this component renders a child:

return (
    <div onClick={() => incrementY()}>
      <Child nested={state.nested} />
    </div>
);

If I understand correctly, a re-render of the parent component will always lead to a re-render of the child component (even when the reference to the nested object stays the same).

I'm aware that immutable state can be useful when there is a need to keep the history of states (e.g. for CTRL + Z functionality). But are there any reasons specific to React that I'm missing?