Is there a reason to keep state completely immutable in React?

April 1, 2022

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?

>Solution :

If I understand correctly, a re-render of the parent component will always lead to a re-render of the child component

By default yes, but the child component can use React.memo (or other techniques for class components) to skip rendering if its props have not changed. If you mutate the nested object, then pass that object to the child, it will look to the child like nothing has changed.

So if you want to be able to reliably use react’s tools for skipping rendering, then you must make your state immutable at all levels.