Consecutive setState calls not working properly

Question

I am creating a component with an animation that occurs when the css class is switched. An example sandbox is here .

The css class is applied conditionally to the field transitioned, so we should get the animation when the field transtionedtakes the form false- true.

Problem:

Animation does not occur if the state, if it is changed as follows:

animateWithoutST = () => {
    this.setState({transitioned: false}, 
    () => this.setState({transitioned: true}))
  }

But it works if the second setStateis called in the callback setTimeoutas follows:

 animateWithST = () => {
    this.setState({ transitioned: false },
    () => {
      setTimeout(() => this.setState({ transitioned: true }))
    }
    )
  }

Why animateWithoutSTdoes it work as expected, although my component is rendering in the correct order?

Answer 1

, , , .

, , setTimeout , componentDidUpdate, : , , , - , : " , " .

setTimeout, , . - 0, , > 16 aprox, ( , ).

requestAnimationFrame, , , , .

, , . ?

Answer 2

componentDidUpdate:

componentDidUpdate(prevProps, prevState) {
    if(!this.state.transitioned) {
        this.setState({
            transitioned: true
        });
    }
}

, setState .

Answer 3

setState , , . , setstate , . , setstate()