Reactjs: using for-loop inside componentDidMount

Question

I am having trouble understanding why my component state does not change inside the for-loop.

Here's an example:

class Example extends React.Component {
    constructor() {
        super()
        this.state = { 
            labelCounter: 1, 
        }
    }


    componentDidMount() {                   
        for (let i = 0; i < 10; i++) {
            this.setState({ labelCounter: this.state.labelCounter + 1 })

            console.log(this.state.labelCounter) // this.statelabelCounter = 1
        }
    }

}

Whereas if I changed the code slightly to this, it seems to be changing as expected:

class Example extends React.Component {
    constructor() {
        super()
        this.state = { 
            labelCounter: 1, 
        }
    }


    componentDidMount() {                   
        for (let i = 0; i < 10; i++) {
            this.setState({ labelCounter: ++this.state.labelCounter })

            console.log(this.state.labelCounter)
        }
    }

}

SanderRonde · Accepted Answer · 2017-05-04 18:32:59Z

1

I think the issue you're having is that react batches updates to the state. This means that instead of it working synchronously, it just applies setState({ labelCounter: this.state.labelCounter + 1}) after the loop, and this.state.labelCounter + 1 is resolved to a fixed number (1 in this case), that is reapplied 10 times. So the labelCounter is set to 1 10 times.

In the last example you are updating by changing the property yourself (and not having react do it), which is why it works.

I would guess the best way to do it is to wait for a batch to have been applied (for example with setTimeout(x, 0)) and doing the rest after that, or trying to avoid this altogether.

answered May 4, 2017 at 18:32

SanderRonde

3011 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ren.rocks Over a year ago

You can also use a callback to get the value when it finishes updating as per the docs: facebook.github.io/react/docs/react-component.html#setstate

Community · Accepted Answer · 2017-05-23 12:02:23Z

0

Correct me if I am wrong, but "this.state.labelCounter + 1" is not the same as "this.state.labelCounter ++" because it is evaluating the state value before making the changes to the state value.

Another option would be "this.state.labelCounter += 1"

Source: (Not exactly similar) Difference between ++ and +=1 in javascript

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 4, 2017 at 18:32

Michael Walker

891 silver badge5 bronze badges

Collectives™ on Stack Overflow

Reactjs: using for-loop inside componentDidMount

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related