How many times will multiple setState in React be called?
This article will explain in detail how many times multiple setState in React will be called. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
1. Two setState, how many calls?
As shown in the following code, there is a count in state. A click event is bound to the button, in which setState is executed twice, each time adding 1 to the value of count.
How many times does setState execute when the button is clicked? How many times will render () be executed?
Answer: all once.
State = {count: 0}; handleClick = () = > {this.setState ({count: this.state.count + 1}); this.setState ({count: this.state.count + 1});}; render () {console.log (`render`); return (current count: {this.state.count} add);}
According to common sense, when the button is clicked for the first time, since the setState is executed twice, adding 1 to the value of count () each time should be executed twice, and the final value of count should be 2. But that's not how React works.
The above code can be run in the browser:
Initially, the page displays a value of 0 for count, and the console prints out render, which is printed when React first renders. When the button is clicked, the page shows that the count value is 1, and only one render is printed, indicating that React has only performed setState once and render () render operation only once in the process.
The reason is that React merges multiple setState in the same event response function to reduce the number of setState calls, which can reduce the number of rendering times and improve performance.
This explains why the final value of count is 1, because React merges the two setState and ends up executing only once, and render () only once.
two。 Which one of the two setState is called?
However, the above code does not verify which setState is executed after the React merge. As shown in the following code, change the operation on count in the second setState to add 2, and the rest of the code remains the same:
State = {count: 0}; handleClick = () = > {this.setState ({count: this.state.count + 1}); this.setState ({count: this.state.count + 2}); / / changed to + 2}; render () {console.log (`render`); return (current count: {this.state.count} add);}
Put it in the browser again to execute:
The results show that after clicking the button, the value of count finally becomes 2, that is, the operation of + 2 is performed, and render () is executed only once. This means that when React merges multiple setState, if an attribute with the same name appears, the subsequent attribute with the same name will overwrite the previous attribute with the same name. It can be understood that for attributes with the same name, the final execution is the attribute in the final setState.
3. Two setState in setTimeout?
What if you add a timer setTimeout to the click event function and perform two setState operations in the timer? In the following code, in the event handler, a timer setTimeout is written to put the setState twice into the setTimeout.
State = {count: 0}; handleClick = > {setTimeout (()) = > {this.setState ({count: this.state.count + 1}); this.setState ({count: this.state.count + 2});}, 0);}; render () {console.log (`render`); return (current count: {this.state.count} add);}
Running result:
The results show that after clicking the button, the value of count finally becomes 3, and the operations of + 1 and + 2 are performed, and render () is executed twice.
This is because calling setState directly in React's composite events and lifecycle functions will be managed by React's performance optimization mechanism, merging multiple setState. Calling setState in the native event, setTimeout, is not managed by React, so it does not merge multiple setState. If you write setState several times, you will call setState several times.
This is the end of the article on "how many setState calls will be called in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
