React useState Hook 是否应当始终优先使用更新函数而非直接传入状态对象

这个推荐的核心逻辑是降低代码出bug的概率、统一更新写法的心智负担，具体原因可以分为以下几点：

• 规避闭包快照导致的状态更新异常
  React组件每次渲染都会生成独立的闭包，你在当前渲染周期内拿到的状态值永远是这次渲染的快照。如果你在回调函数、定时器、useEffect等异步逻辑中直接使用当前闭包的状态值更新状态，很可能拿到的是过期的旧值。哪怕你当前的更新逻辑看起来不依赖旧状态，后续代码迭代一旦新增依赖旧状态的逻辑，很容易因为忘了改成函数式更新出现bug。
  举个简单的示例：

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    // 这里拿到的count永远是初始渲染的0，更新后永远是1，不符合预期
    setCount(count + 1);
    // 改成函数式更新就可以拿到最新的前序状态
    // setCount(prev => prev + 1)
  }, 1000);
  return () => clearInterval(timer);
}, []);

• 保证批量更新场景下的行为符合预期
  React默认会对同一个事件循环内的多次状态更新做批量合并。如果你直接传值更新同一个状态，多次更新会被合并为最后一次：

// 直接传值更新，三次更新后count最终值为1，因为三次都取了当前闭包的count=0
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

// 函数式更新，三次更新后count最终值为3，每次都能拿到上一次更新后的状态
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

• 降低心智负担，统一更新写法
  你不需要每次写状态更新时都额外判断「这次的新状态是否依赖前序状态」，统一用函数式更新即可，省去了判断的成本，也不会因为漏判出现状态更新错误。
• 提升代码可维护性，降低迭代风险
  业务逻辑经常会迭代调整，比如一开始你只是要把状态重置为固定值setUserInfo({})，后续需求改为重置时要保留用户ID字段，你只需要修改函数的返回值即可，不需要把整个更新写法从传值改为传函数，减少代码改动的出错概率。

当然这种推荐也不是绝对的，如果你明确当前更新是完全独立于旧状态的同步更新，直接传值也完全没问题，但统一优先使用函数式更新的收益远高于可以忽略不计的函数创建开销，是性价比很高的代码规范。

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