ReactJS - Understanding SetState Asynchronous Behavior and How to correctly use it

ReactJS setState is Asynchronous

setState() method in ReactJS class components is asynchronous in nature. Lets understand this with the help of an example.

Example: Lets create a counter field and have two Plus and Minus buttons for incrementing and decrementing count. And, we will maintain counter in component’s state.

Example showing Asynchronous behavior of setState

import React, { Component } from 'react'

class MyApp extends Component {
    state = {
        counter: 0
    }
    minusHandle = () => {
        console.log('minus debug 1', this.state.counter);
        
        this.setState({counter: this.state.counter - 1});
        this.setState({counter: this.state.counter - 1});

        console.log('minus debug 2', this.state.counter);
    }

    plusHandle = () => {
        console.log('plus debug 1', this.state.counter);
        
        this.setState({counter: this.state.counter + 1});
        this.setState({counter: this.state.counter + 1});

        console.log('plus debug 2', this.state.counter);
    }
    render() {
        return (
            <React.Fragment>
                <button type="button" onClick={this.minusHandle}>
                    Minus
                </button>
                count : {this.state.counter}
                <button type="button" onClick={this.plusHandle}>
                    Plus
                </button>
            </React.Fragment>
        )
    }
}

class App extends Component {
    render() {
        return <React.Fragment>
            <MyApp />
        </React.Fragment>
    }
}

export default App;

Lets have a look at the output:

# web
[Minus] Count: 0 [Plus]

# click on [Plus] button
## web
[Minus] Count: 1 [Plus]
## Console log
plus debug 1 0
plus debug 2 0

# click on [Plus] button
## web
[Minus] Count: 2 [Plus]
## Console log
plus debug 1 1
plus debug 2 1

If you notice, both console.log statements prints count: 0, as they executed before setState() executed. Since, setStaate is asynchronous. Also we are calling setState() twice. Even then, counter is increased by 1 only. Because both setState() calls are aware of one state only at the time of start.

Similarly if I click on Minus button, same kind of behavior will happen. So, the important thing to note is that you can not rely on setState() for calculating next state.

Fix this

setState() has another variant, which accepts a function. It receives previous state and current props as argument. See complete example. I have modified only plusHandle()

import React, { Component } from 'react'

class MyApp extends Component {
    state = {
        counter: 0
    }
    minusHandle = () => {
        console.log('minus debug 1', this.state.counter);
        
        this.setState({counter: this.state.counter - 1});
        this.setState({counter: this.state.counter - 1});

        console.log('minus debug 2', this.state.counter);
    }

    plusHandle = () => {
        console.log('plus debug 1', this.state.counter);
        
        this.setState(
            (state, props) => {
                return { counter: state.counter + 1 };
            }
        );
        this.setState(
            (state, props) => {
                return { counter: state.counter + 1 };
            }
        );

        console.log('plus debug 2', this.state.counter);
    }
    render() {
        return (
            <React.Fragment>
                <button type="button" onClick={this.minusHandle}>
                    Minus
                </button>
                count : {this.state.counter}
                <button type="button" onClick={this.plusHandle}>
                    Plus
                </button>
            </React.Fragment>
        )
    }
}

class App extends Component {
    render() {
        return <React.Fragment>
            <MyApp />
        </React.Fragment>
    }
}

export default App;

Lets take a look at the output, when I click on Plus button

# initial web view
[Minus] Count: 0 [Plus]

# click on [Plus] button
## web
[Minus] Count: 2 [Plus]

## console
plug debug 1 0
plug debug 2 0

# click again on [Plus] button
## web
[Minus] Count: 4 [Plus]

## console
plug debug 1 2
plug debug 2 2

Notice the magic. State is updated as many times you have called setState(). But, the behavior of setState() is still asynchronous, i.e. debug statements executed before setState()