Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniele Ratti
Daniele Ratti
Courses Plus Student 4,475 Points

Is it a good practice to change the this.state and then pass it to the setState?

Is it a good practice to change the this.state and then pass it to the setState as shown in the videos? I always read that the state should not be modified directly and that's far better to use spread operators or splices inside the setState instead of modifying it.

Of course, on the other hand, the method described is faster.

Can I have a clarification?

Thanks

2 Answers

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! this.state actually represents your current state whereas setState modifies your current state. Mind the word modifies. State shouldnt be mutated , it should always be modified. But ever wondered why is that? What if you wanna go back to previous state? What if you wanna toggle between states? What happens to the history object? I think these questions are self-explanatory if a state should be mutated. For all my states, i tend to use Redux with React coz it holds all my state in a store object and then you connect your store with view. Now not only you have a modular code which is easy to debug , you also have this single file which dictates all your state and updates it according to whatever event is fired by a user.

Spread operators, destructuring, default operator, splices, currying etc are all helper high order functions which help us keeping the original state intact , but modifying state at the same time. React is declarative and can be very opinionated sometimes but thats exactly where its powerful and versatile. Its always predictable and you already know what are you gonna get outta it, right?

~ Ari

Daniele Ratti
PLUS
Daniele Ratti
Courses Plus Student 4,475 Points
Daniele Ratti
Daniele Ratti
Courses Plus Student 4,475 Points

Thank you Ari. My question was mainly about the content of the Treehouse videos about react. In the videos I see things like:

this.state.list.push([...]);
this.setState(this.state);

When I read on https://facebook.github.io/react/docs/react-component.html "Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable."

(As you said)

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Daniele Ratti in the first statement , you're simply mutating the original state by pushing the payload to the current state. Whereas in the second statement, you're setting the state by passing in this.state to this.setState() method. Where this is the context of the owner on which its called. Do you see the difference now? Simply, in first statement you're mutating the state by pushing the payload but in the second statement, you are setting the same state as the current and updated state.