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 1If 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 2Notice 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()
$ subscribe --weekly
One deep dive a week, in your inbox
System design, AI engineering, trading systems and interview prep. Tested code, real numbers. Free, and you can unsubscribe any time.
or read it on gyanbyte.substack.com
