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 React Components (2018) Managing State and Data Flow Controlled Components

Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,676 Points

Aren'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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

Hey 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,676 Points

So 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

Hey Tyler McDonald! Thanks for reaching back!

"So 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?"

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.

On the other hand, individual values (or objects/arrays with a single value) can safely be updated directly?

Correct!