A Practical Guide on Understanding Git Best Practices
Introduction In this post, we will learn about some of Best practices while…
June 28, 2020
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.
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.
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()
Introduction In this post, we will learn about some of Best practices while…
Introduction There might be a situation when you are doing some changes in the…
You might need to put sudo before above command. The command will show details…
Lets implement a command shell by using a command dispatcher. The objective is…
You have drupal 7 image from docker hub, and want to connect tomongo db via php…
In previous article: Effective Git Branching Strategy, I discussed Git branching…
In this post, we will see some of the frequently used concepts/vocabulary in…
System design interview is pretty common these days, specially if you are having…
Introduction You are given an array of integers with size N, and a number K…
Graph Topological Sorting This is a well known problem in graph world…
Problem Statement Given a Binary tree, print out nodes in level order traversal…
Problem Statement Given an array nums of n integers and an integer target, are…