Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Shouldn't state be treated as immutable in React?

I notice the method of updating state presented in the Learn React Track often involves mutating the current state. For example, in this video, the current players state was changed by pushing a new player onto the players array. I thought state should be treated as immutable in React? So setting the state by creating copies of the old state combined with the new state. I'm not exactly sure of the reason why immutability is so important but I think it has something to do with React's state management and not bypassing it... I wonder if anyone could clarify?

1 Answer

Jacob Richter
Jacob Richter
11,210 Points

Hey Adam,

Great question. You should never mutate the state directly instead you should use the this.setState method available at all times.

You are right and you should never ever ever do this.state.pop() or otherwise as this skips the re-render of your component (that occurs during this.setState) and knocks things out of sync.

If you wish to make alterations to the state using push and pull as you have stated above I would first do a shallow copy of the state and then altering via mutation methods and returning the new arrays / objects via setState.

Such as:

let someArray = this.state.someArray
someArray.pop()
this.setState({someArray: someArray})

A more sophisticated method is to use the setState method in full which can take a function that is passed the current state, this is much better for keeping state in sync if you have many this.setState calls occuring at nearly the same time.

this.setState((state) => { someKey: state.someStateMutation }) 

For poping you should instead use

const newArray = oldArray.splice(-1,1) 

and for adding you can use the new spread syntax

const newArray = [...oldArray, newElement]

Please check out the new spread syntax introduced in ES7 which allows you to do shallow copies and pretty awesome functional techniques as well. There are plenty of resources on functional programming using Javascript and I urge you to check these out, you'll need them if you ever move to more advanced state management such as Redux or MobX and they allow you to do pretty cool things in relatively short amount of code.

Any other questions let me know. Jacob.