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
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 PointsAren't we supposed to avoid updating state directly?
In previous videos we were advised to update state indirectly by making a copy of state and then modifying the copy, and not the original state. But here it was modified directly with this.state.value. I'm trying to understand when we can change state directly vs. indirectly.
1 Answer
Laura Coronel
Treehouse TeacherHey Tyler McDonald! Great question. So in video we are setting the value of the input tag to be the value state (this.state.value) we are actually modifying the stat in the handleValueChange function by using the setState method.
For your main question: When to change state directly vs. indirectly? Change the code directly when you want to change the whole state. I.e changing the value state to equal the input value (e.target.value). I would recommend changing data indirectly when your state is an array or an object and you want to modify a small portion of the state and not replace it entirely (ie changing the score or adding a player). You need to update it indirectly b/c in Javascript objects and arrays are passed by reference. Here's a good resource to understand passed by reference.
If you manipulate the state directly React may not notice the state change b/c the object/array's reference is the same. Since they are passed by reference you need to create a new copy of the object or array with the spread operator (...) so you get a new reference and React will noticed you passed new data as state.
I hope this is helpful! I see you're on slack! Feel free to reach out if you would like to talk about this more!
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 PointsTyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 PointsSo because of the concept of passed by reference and passed by value, that determines when we should update state directly or indirectly? And if I understand, that means changing state of an object should be done indirectly, since changing directly would still reference the previous state? On the other hand, individual values (or objects/arrays with a single value) can safely be updated directly?
Laura Coronel
Treehouse TeacherLaura Coronel
Treehouse TeacherHey Tyler McDonald! Thanks for reaching back!
Correct. If you update an object directly it's hard for React to know there is a change because objects are pass by reference so the reference to the object state didn't change even though we updated a property in the object. So in our case we have an array of player objects, when we update the player's score directly the reference to the object and the reference to the array stay the same. To let React know something in the object has updated we need to copy the object and array with the spread operator to get a new reference to pass to the state.
Correct!