React是否能智能跳过setState中相同值或未变化状态的更新？

Great questions—these are super common when you’re digging into how React handles state changes. Let’s break them down clearly:

1. Does React skip state updates when you pass the same value to setState? #

It depends on whether you’re using class components or function components with useState:

• Class components: By default, React doesn’t automatically skip these updates. Even if you call setState({ count: this.state.count }), React will still kick off the re-render process (including running the render method). To get this "skip" behavior, you’ll need to either:
  • Implement shouldComponentUpdate to manually compare the current and next state/props, returning false if they’re identical.
  • Extend PureComponent instead of Component—it does a shallow comparison of state and props automatically, skipping the re-render if nothing’s changed.
• Function components (with useState): React has built-in shallow comparison here. If you pass a value that’s shallowly equal to the current state (like calling setCount(prev => prev) or passing the exact same primitive value), React will recognize no change happened and skip the re-render entirely. This also means any useEffect hooks that depend on this state won’t run. Just remember: this is a shallow comparison—if you’re dealing with objects/arrays, a new reference (even if the content is identical) will still trigger an update.

2. When setting multiple states, does React skip updating the state that hasn’t changed? #

Absolutely—React checks each state update individually:

• If you’re updating multiple states (whether in a single setState call in class components, or multiple setX calls in function components), React will do a shallow comparison for each state value. For any state where the new value is shallowly equal to the current one, it will skip updating that specific state.
• For example: Suppose you have count set to 5 and name set to "Bob". If you call setCount(5) (same as current) and setName("Alice") (new value), React will only process the name update. The count update gets ignored, and the component re-renders only because name changed—no extra work is done for the unchanged count.
• Again, watch out for reference types! If you create a new object/array with the same content as the current state (like setUser({ ...currentUser })), the reference is new, so React will treat it as a state change and won’t skip the update.

内容的提问来源于stack exchange，提问作者Jiahe Xiao