为何useEffect内变量更新存在延迟？useRef存旧值逻辑疑问

先看你的代码：

const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");

useEffect(() => {
  previousInputValue.current = inputValue;
}, [inputValue]);

return (
  <>
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
    <h2>Current Value: {inputValue}</h2>
    <h2>Previous Value: {previousInputValue.current}</h2>
  </>
);

核心原因是React的渲染流程和useEffect的执行时机：

• 当你在输入框输入内容时，onChange触发setInputValue，更新状态并触发组件的下一次重渲染。
• 进入新的渲染周期时，inputValue已经是最新值，但previousInputValue.current还没更新——因为useEffect是在组件渲染完成、DOM更新后才会执行的，并非在渲染过程中同步执行。
• 所以这次渲染时，页面上的Previous Value显示的是previousInputValue.current的旧值（也就是上一轮渲染完成后useEffect存入的内容）。
• 渲染完成后，useEffect才会执行，把当前渲染周期的inputValue（最新值）赋值给previousInputValue.current。
• 等到下一次输入触发重渲染时，新的inputValue是最新输入的内容，而previousInputValue.current是上一轮useEffect保存的值，自然就对应了“旧值”。

简单说：每次渲染展示的previousInputValue.current，是上一轮渲染完成后存入的上一次状态，当前渲染的useEffect要等渲染结束才会更新它，所以永远慢一拍，刚好能拿到旧值。

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