Is the React State really immutable?

Question

I am developing a React App and stumbled upon this behavior of the React state which i am not really sure if it's correct!?

I initiate my State like this:

componentDidMount() {
someRequest()
   .then(...) //do stuff to get the Payload of the Response
   .then(response => {
      this.setState({
         obj1: response,
         obj2: response.someArr
      })
    })
}

And i have a formHandler that changes the state of obj2

formHandler = event => {
   ...
   this.setState({obj2: newArrState})
}

I always assumed that the React state is immutable so that obj2 hold a new reference to a new object/array after the setState() call.

However if i take a look at this.state.obj1 i also see the changes propagated to this.state.obj1.someArr so that this.state.obj1.someArr === this.state.obj2

Is that a correct behavior?

Immutability is not a feature. Its a pattern you have to follow, in my understanding. — Rajesh, Mar 29 '19 at 12:47
What's newArrState? How do you observe this? That's what matters here. — Estus Flask, Mar 29 '19 at 12:47
This will help: https://stackoverflow.com/questions/35867038/what-the-difference-of-this-state-and-this-setstate-in-reactjs — Rajesh, Mar 29 '19 at 12:49
@etus newArrState is a modified version of this.state.obj2 (the Array contains a more or less complex object thus there is no es6 spread magic thingy) Nonetheless in my understanding setState creates a copy and therefore the reference from `obj1.someArr` shouldn't be affected. Am i wrong? — Tsumiqt, Mar 29 '19 at 13:06
EDIT: Clarification `let newArrState = this.state.obj2;` `newArrState.push(newObj);` `this.setState({obj2: newArrState});` — Tsumiqt, Mar 29 '19 at 13:16

score 2 · Accepted Answer · answered Mar 29 '19 at 13:16

2

React does not enforce immutability on your state. In fact, you can (but you absolutely should not) modify it directly.
It is up to you, the developer to enforce immutability on your data, either using data structures that simply cannot be modified (e.g. imuutable.js), or otherwise.

answered Mar 29 '19 at 13:16

Dor Shinar

1,474
2
11
17

Yeah i allways thought they enforce it by creating a deep copy each time you call `setState()`. – Tsumiqt Mar 29 '19 at 13:25

score 1 · Answer 2 · answered Mar 29 '19 at 13:17

Yes this is a correct behaviour. React state should be maintained as if it is immutable as any value that is changed will be overriden by the next setState call.

From the React docs:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

https://reactjs.org/docs/react-component.html#state

Is the React State really immutable?

2 Answers2