Updating State of React Component

JavaScript
1

I’m new to learning React. I have a class ListItem that extends the React.Component class.
I’m curious why there’s a difference in console outputs and what would be best practice between using this.setState({ stateItem : newValue }) and just assigning the state directly with this.state.stateItem = newValue.

Here’s my example (I’ve tried to just limit the code to the area of the component in question).
In both scenarios, the component has an initial state.

constructor(props) {
     super(props);                
     this.state = {
         itemStatus : false
     }
 }
 render() {
                return (
                    <li>
                        <input type='checkbox' id="item-1" name="item-1" onClick=
{this.toggleItemStatus.bind(this)} />
                        <label htmlFor="item-1">{this.props.title}</label>
                    </li>
                );
            }

Then comes the part in Question

            toggleItemStatus() {
                console.log(this.state.itemStatus);  //Outputs false 
                this.state.itemStatus = !(this.state.itemStatus);
                console.log(this.state.itemStatus); //Outputs true
            }

Versus the other approach

            toggleItemStatus() {
                console.log(this.state.itemStatus);  //Outputs false 
                this.setState({
                    itemStatus : !(this.state.itemStatus)
                });
                console.log(this.state.itemStatus); //Outputs false
            }
1 Like
2

Awesome job working on learning React.

The React docs recommend against setting state directly.

state is a reference to the component state at the time the change is being applied. It should not be directly mutated.

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

It’s helpful more and more for me to read through docs when trying to learn something new.

Again, really awesome that you’re getting out of your comfort zone and learning something new

1 Like
3

Sorry I missed the second question you had. The state is different because

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

So in your example, using setState is not immediately updating the component. Does that make sense?

4

Yeah that totally makes sense, thank you for the doc reference and being so thorough! I hadn’t come across that part in the docs. I had read up on the props and knew they were to be treated as read-only, which then got me mutating the state. But it makes sense for React to defer the update until it can do it over a bunch of components.

There’s definitely a steep incline to learning something new and outside of the comfort zone but well worth the efforts!

1 Like
5

Don’t mutate state directly. Use setState.