What's the risk of modifying the state without setState?

Question

I know that modifying directly the state without setState(...) won't update the UI automatically, but I can still do this:

this.state.myValue = "foo";
this.forceUpdate();

I am also aware that React waits for certain moments to update several components in a single pass, but are there really any compelling reason why I shouldn't alter directly the state without setState(...)?

There are 2 scenarios where altering directly the state would be beneficial for me:

• If I have to modify an element of a very long array, the performance gain from the 'cluster update' of setState(...) would be negligible compared to the performance gain from not shallow copying the entire array every time.

• If I have 2 references to the same object in 2 different properties of the state and I want to modify this object, I would prefer to do this modification on a single property, but if I use setState(...) I would copy the object and lose the reference.

Thank you for your help.

Answer 1

If you modify state directly and at same time some other logic also updates state. It is not guaranteed that you have correct state or other logic is having correct state.

It might give you unpredictable results and behavior. So it is always advisable to use only setState() as this is async and update state immutably.