使用React setState的更新器函数语法

Question

I usually update state in react to toggle a icon display in react:

  toggle = () => {
    this.setState({
       open: !this.state.open
    })  // setState
  } // toggle callback

Now I saw a new way of doing it, which is recommended over the above way:

  toggle = () => {
    this.setState((prevState, props) => {
      return {
        open: !prevState.open
      } // return
    })  // setState
  } // toggle callback

In this case, the setState function consumes a updater(which in this case is a callback function), which worked. how does the setState function consumes the updater? The second parameter in updater props was not even used, what is the use of it?

Answer 1

In your case, you may omit the second parameter to the setState,

toggle = () => {
    this.setState((prevState) => {
      return {
        open: !prevState.open
      } 
    })  
  }

However, its useful when you want to update the state based on both the current props and the prevState value.

Also

(prevState) => {
      return {
        open: !prevState.open
      } 
    }

is not a callback, but an updater function. According to the React docs:

The first argument is an updater function with the signature:

 (prevState, props) => stateChange 

prevState is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from prevState and prop s. For instance, suppose we wanted to increment a value in state by props.step:

 this.setState((prevState, props) => { return {counter: prevState.counter + props.step}; }); 

Both prevState and props received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with prevState .

Also refer to this answer on Stackoverflow to see what a setState callback is useful for,

When to use React setState callback

Answer 2

I want to add more information why using a callback function in setState should be recommended.

setState is asynchronous

React batches state changes for performance, so that your state may not change immediately after setState . That means you should not rely on the current state when calling setState because you cannot be sure what that state will be!

Moreover, your syntax could be simply

this.setState(prevState => ({ open: !prevState.open }))