React useState setter是否在任何场景下都不会立即生效？onChange中呢？

useState的setter方法永远不会立即更新状态，你遇到的两种场景差异，本质是组件渲染周期的不同导致的，并非setter的行为发生了改变。

第一个示例的原因分析 #

在第一个代码片段中，点击提交按钮后执行的逻辑是：

e.preventDefault();
setName("submit");
console.log("onSubmit:", name);

调用setName("submit")只是告诉React「需要更新name状态」，但当前函数作用域内的name变量依然是初始的空字符串——因为状态更新会被React调度，要等到下一次组件渲染时，才会生成新的name变量并赋值为"submit"。所以紧接着的console.log打印的是当前作用域的旧值。

第二个示例的逻辑拆解 #

在第二个代码片段中，输入框的onChange事件每次触发时都会调用setName(e.target.value)，每次调用都会让React调度组件重新渲染。当你最终点击提交按钮时，组件已经经过了多次重新渲染，此时当前函数作用域内的name已经是输入框的最新值了。

你可以做个简单测试验证这一点：在onChange中调用setter后立刻打印name，会发现输出的依然是更新前的旧值：

onChange={(e) => {
  setName(e.target.value);
  console.log("onChange:", name); // 打印更新前的旧值，而非刚设置的e.target.value
}}

这足以证明，setter在onChange中同样没有立即生效，只是提交操作发生在状态更新后的渲染周期里，所以能拿到最新的状态值。

关键结论 #

• useState的setter始终是异步调度状态更新，不会立即修改当前作用域的状态变量
• 若需要在状态更新后执行逻辑，应该使用useEffect监听状态变化，或者使用函数式更新（当新状态依赖旧状态时）：

  // 函数式更新，依赖旧状态计算新值
  setName(prevName => prevName + "suffix");
  

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