关于React中useState更新回调函数参数使用差异的疑问

原代码示例 #

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

关于两个状态更新函数的写法差异 #

setCalculation(() => count * 2) 和 setCount((c) => c + 1) 都是useState返回的状态更新函数的回调式调用，核心区别在于是否依赖当前最新状态值来计算新状态：

• setCalculation 的回调直接使用外部作用域的count变量，因为它处于useEffect中，且count被加入了依赖数组。每次count更新时，useEffect都会重新执行，此时的count必然是最新的状态值，无需通过回调参数获取。
• setCount((c) => c + 1) 的回调接收参数c，这个参数是React主动传入的当前最新状态值。这种写法是为了应对连续触发更新的场景（比如快速点击按钮），确保每次更新都基于上一次的最新状态计算，避免闭包捕获旧值导致的更新错误。

两种写法都是合法的，只是适用场景不同：当能确保外部作用域的状态值是最新的，可直接使用；当需要基于上一次状态计算新值时，优先用带参数的回调。

为什么setCount用c而非count，setCalculation却直接用count #

• setCount 用c作为参数名，是为了明确区分「回调参数里的最新状态」和「外部作用域的count变量」。当然也可以写成setCount((count) => count + 1)，但用不同命名能避免混淆，防止误以为使用的是外部的旧值，尤其在复杂组件中更清晰。
• setCalculation 直接用count，是因为useEffect的依赖数组包含count，每次count更新都会触发useEffect重新执行，此时的count就是最新状态值，完全可以直接使用，不需要额外通过回调参数获取。

举个反例：如果把setCount写成setCount(() => count + 1)，快速点击按钮时可能出现更新失效——闭包捕获的是旧的count值，多次点击只会基于同一个旧值加1，无法实现连续累加。而带参数的回调则能每次拿到最新状态，保证累加正确。

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