Detailed explanation of React setState data update mechanism

Why use setState

In the process of React development, it is inevitable to deal with the state of components. Anyone who has used React knows that if you want to modify the value in the state, you must use the internally provided setState method. Why can't we directly modify the value of state using assignment? Let's analyze it and take a look at a demo first.

class Index extends React.Component {
  this.state = {
    count: 0
  }
  onClick = () => {
    this.setState({
       count: 10
    })
  }
  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.onClick}>click</button>
      </div>
    )
  }
}

According to the above code, you can see that after clicking the button, the value of count in state is changed to 10. And update the page display. Therefore, the change of state has two effects: the corresponding value changes and **page updates. **To achieve these two points, setState is necessary in react. Suppose we modify the onClick method content to this.state.count = 10 and print out the value of this.state in the method, we can see that the value of state has changed. But the page is not updated to the latest value. ☆To sum up:

• The purpose of changing the state value is to update the page. We hope that React will use the latest state to render the page. However, the direct assignment method does not allow React to monitor state changes.
• The setState method must be used to tell React that the state data has changed.
  

☆To expand:

In Vue, direct assignment is used to update data, and Vue can also use the latest data to render the page. Why is this? In vue2, Object.defineProperty() is used to monitor the get and set methods of data to monitor data changes. In vue3, ES6 proxy is used to monitor data changes.

Usage of setState

I believe everyone knows the usage of setState, but I still want to record it here: the setState method has two parameters: the first parameter can be an object to directly modify the property value, or it can be a function that can get the previous state value. The second parameter is an optional callback function that can get the latest state value. The callback function will be executed after the component update is completed, which is equivalent to being executed during componentDidUpdate lifecycle.

• When the first parameter is an object: Just like the demo above, directly modify the attribute value of state

this.setState({
	key:newState
})

• When the first parameter is a function: the property value of the previous state can be obtained within the function.

// prevState is the previous state, props is the props when this update is applied
this.setState((prevState, props) => {
  return {
      key: prevState.key 
  }
})

Asynchronous or synchronous updates

setState() queues a change to a component's state and notifies React that this component and its children need to be re-rendered with the updated state. This is the primary way to update the user interface in response to event handlers and server data. Treat setState() as a request rather than an immediate command to update the component. For better perceived performance, React calls it lazily and then updates multiple components in a single pass. React does not guarantee that state changes will take effect immediately.

Let's modify the above code first. If setState is called three times in a row in the onClick method, as mentioned above, setState is an asynchronous method. Each call only adds the change to the queue. When calling synchronously, only the last update will be executed, so the result is 1 instead of 3.

onClick = () => {
  const { count } = this.state
  this.setState({ count: count + 1 })
  this.setState({ count: count + 1 })
  this.setState({ count: count + 1 })
}

The above code can be understood as Object.assign() method.

Object.assign(
  state,
  { count: state.count + 1 },
  { count: state.count + 1 },
  { count: state.count + 1 }
)

If a function is passed as the first parameter and called three times in a row, will the result be the same as passing it as an object?

onClick = () => {
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
}

The result is quite different from the way of passing in the object. Using the function method can achieve the effect of increasing by 3. Why is this? The latest state and props values ​​can be obtained within the function. From the above, we can see that setState is updated in batches. Using a function ensures that the current state is based on the previous state, so the effect of self-incrementing by 3 is achieved.

☆To sum up: Why is the setState method asynchronous?

• It can significantly improve performance. React16 introduced the Fiber architecture, which divides and prioritizes tasks and gives priority to tasks with higher priorities. The response of the page is a high-priority task, so if setState is synchronous, the page must be updated once it is updated, which will block the response of the page. The best approach is to get multiple updates and then perform batch updates. Update the page only once.
• If the state is updated synchronously but the render function has not yet been executed, the state and props cannot be kept in sync.

**Are all setStates asynchronous? **The answer is yes! ! ! There are also scenarios where setState is synchronized in React.

onClick = () => {
	this.setState({ count: this.state.count + 1 })
  console.log(this.state)
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 })
    console.log(this.state)
  }, 0)
}

The above code will print **0, 2. **Why is this? In fact, setState in React is not an asynchronous function in the strict sense. It is implemented through delayed execution of the queue. Use isBatchingUpdates to determine whether the current setState is added to the update queue or updates the page. When isBatchingUpdates=ture , add it to the update queue, otherwise execute the update.

We know that React uses isBatchingUpdates to determine whether to join the update queue. So why is isBatchingUpdates value false in setTimeout event? The reason is that in React, the native events of HTML are encapsulated and called synthetic events. **Therefore, in React's own life cycle and synthetic events, the value of isBatchingUdates can be controlled, and the value can be used to determine whether to update the page. In native events provided by the host environment (i.e. non-synthetic events), the value of isBatchingUpdates cannot be set to false, so the update will be performed immediately.

☆So setState is not a synchronous scenario, but it is not controlled by React in special scenarios**

Summarize

setState is not a simple synchronous function or asynchronous function. The difference between its synchronous and asynchronous performance is reflected in the different calling scenarios. It behaves as an asynchronous function in React's lifecycle and synthetic events. In non-synthetic events such as DOM's native events, they appear as synchronous functions.

The above is a detailed explanation of the React setState data update mechanism. For more information about the React setState data update mechanism, please pay attention to other related articles on 123WORDPRESS.COM!