React useState更新：传值与传函数的区别及适用场景

Great question! Let's break down exactly how these two approaches differ, and when you should reach for one over the other in your React function components.

基础场景下的表现一致 #

In the simple example you provided, both setCounter(count + 1) and setCounter2(prevState => prevState + 1) will behave identically when you click the button once. That's because each click triggers a single state update, and the count variable in the first approach is pulled from the current render's closure, which holds the latest state value.

核心差异：闭包与状态的时效性 #

The real difference shows up when you're dealing with multiple consecutive updates or asynchronous operations. Here's why:

• When you pass a value directly (like count + 1), React uses the value of count that was captured in the closure when the update function was defined. If you trigger multiple updates before the component re-renders, all of them will use the same old count value.
• When you pass an updater function (like prevState => prevState + 1), React will pass the latest, most up-to-date state value to this function right before applying the update. This ensures you're always working with the current state, even if multiple updates are queued.

Example 1: Multiple consecutive updates #

Let's modify your increaseCounter function to trigger two updates at once:

const increaseCounter = () => {
  setCounter(counter + 1);
  setCounter(counter + 1);
};
const increaseCounter2 = () => {
  setCounter2(prevState => prevState + 1);
  setCounter2(prevState => prevState + 1);
};

• Clicking the first button will only increment counter by 1 (both updates use the same old counter value, e.g., 0 → 1 twice, resulting in 1)
• Clicking the second button will increment counter2 by 2 (each updater function gets the latest state: first 0→1, then 1→2)

Example 2: Asynchronous updates #

If you update state inside an async callback (like setTimeout or a fetch response), the direct value approach will capture the state from when the callback was created, not when it runs:

const delayedIncreaseCounter = () => {
  setTimeout(() => {
    setCounter(counter + 1); // Uses the `counter` value from when setTimeout was called
  }, 1000);
};
const delayedIncreaseCounter2 = () => {
  setTimeout(() => {
    setCounter2(prevState => prevState + 1); // Uses the latest state when the timeout runs
  }, 1000);
};

If you click delayedIncreaseCounter, then click the regular increase button before the timeout runs, the timeout will still increment from the old value. The updater function version will correctly use the latest state when it executes.

适用场景选择 #

Use direct value updates (setX(x + 1)) when: #

• Your state update only depends on the current render's state/props
• You're performing a single, synchronous update (like a single button click that triggers one state change)
• The logic is simple and you don't risk capturing an outdated state value in a closure

Use updater functions (setX(prev => prev + 1)) when: #

• You need to update state based on the previous state (especially for consecutive updates)
• Your state update happens inside an asynchronous operation (timers, promises, event listeners)
• You're queuing multiple state updates in the same function call
• You want to guarantee you're always working with the most up-to-date state value

Bonus: Extracting update logic #

As you noted, extracting state update logic into separate functions (like your increaseCounter and increaseCounter2) is a great practice for real-world development. It makes your code more readable, reusable, and easier to test—regardless of which update approach you choose.

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