In React, you should avoid modifying the state directly, and you need to create a new object update through setState. 1. Modifying the state directly (such as push, assignment) will not trigger re-rendering; 2. The correct way is to use immutable updates, such as the extension operator to create a new array; 3. SetState may be merged multiple times, and functional updates should be used when dependent on the current state; 4. When updating the reference type, deep copy is required to ensure that the new object is referenced differently from the original state, otherwise React cannot detect changes.

In React, directly modifying state updates is a mistake that many newbies are prone to make, but doing so will cause unpredictable component behavior and even cause bugs. React's state update should be "immutable", that is, each update should return a new state object, rather than directly changing the original state.

Modifying the state directly may cause the view to not be updated

React relies on state changes to trigger re-rendering of components. If you directly assign the value to this.state or modify the state in such a way as state.push(...) and state[key] = value , React will not know that the state has changed and will not trigger re-rendering.

For example:

 // The wrong way this.state.items.push(newItem);

Although the above code changes the content of items array, React will not re-render the component. The correct way is to use setState() method and pass in a new array:

 // The correct way this.setState({
  items: [...this.state.items, newItem]
});

This way React will detect state changes and update the UI.

Multiple setState calls may be merged, resulting in unexpected results

React For performance optimization, multiple setState() calls may be merged into one update. If you rely on the current state value when you update without using functional updates, problems may arise.

For example, the following example:

 // Error example: Relying on the current state but not using the function form this.setState({
  count: this.state.count 1
});
this.setState({
  count: this.state.count 1
});

These two setState may be combined and end up adding only 1, instead of the 2 you expect.

The solution is to use functional updates:

 this.setState((prevState) => ({
  count: prevState.count 1
}));

This way, each update can correctly calculate the new value based on the previous state.

Pay attention to deep copy issues when using reference types

When you save an object or array in the state, even if you do not modify the original data directly, it is possible that React cannot detect changes because of the same reference.

for example:

 const newState = this.state.user;
newState.name = 'Tom';
this.setState({ user: newState });

Although you appear to be calling setState , since newState and this.state.user point to the same object, React will think that the state has not changed, thus skipping updates.

A new object should be created:

 this.setState({
  user: { ...this.state.user, name: 'Tom' }
});

This way React can recognize state changes and re-render.

Basically that's it. React's state management emphasizes "immutability", which is the key to ensuring component responsiveness and predictability. Although the writing is a little bit more complicated, as long as you develop a habit, it is actually not complicated, and it is just easy to be ignored.

The above is the detailed content of What are the potential issues with mutable state updates in React?. For more information, please follow other related articles on the PHP Chinese website!