React useState疑问：为何函数式setState会延迟执行？

核心原因在于React对两种setState调用方式的处理逻辑存在差异：

• 直接传值的setState：调用时会立即捕获当前传入的参数值，将这个值存入状态更新队列。后续同步代码对外部变量的修改，不会影响已经被捕获并放入队列的这个值。
• 函数式setState：传入的回调函数不会立即执行，React会将其加入更新队列，等待当前事件处理函数中的所有同步代码执行完毕后，才会调用该回调函数计算新状态。

结合你的代码具体分析：
在onClickHandler函数中：

1. 执行setDummy(()=> inputRef.current.value)时，箭头函数并未立刻执行，只是被React暂存到更新队列中。
2. 紧接着执行inputRef.current.value = "";，直接清空了输入框的内容。
3. 当前点击事件的所有同步代码执行完成后，React才会调用之前暂存的箭头函数，此时inputRef.current.value已经是空字符串，因此状态被更新为空值。

而如果使用setDummy(inputRef.current.value)：

1. 调用时会立即读取inputRef.current.value的当前值（即输入框中的内容），并将这个值存入更新队列。
2. 后续清空输入框的操作，不会改变已经存入队列的那个值，因此状态会被正确更新为输入框原本的内容。

如果想继续使用函数式setState，可以提前保存输入值，避免回调依赖后续会被修改的外部变量：

const onClickHandler = () => {
  const inputValue = inputRef.current.value;
  setDummy(() => inputValue);
  inputRef.current.value = "";
}

内容的提问来源于stack exchange，提问作者Abdelrahman Osama Ahmed Mohame