React Hooks setState：如何等待状态更新后打印新状态（无需useEffect）

首先明确：useState的更新函数（比如setName）是异步批量执行的，而且它不会返回Promise，所以用await完全没用。当前函数执行上下文里的name是闭包捕获的旧值，直接在setName后打印肯定还是"Dan"。

不用useEffect的话，有这几种可行方案：

1. 直接使用已知的新值打印 #

如果你已经明确知道要设置的新值（比如这里的"Tom"），完全可以在调用setName后直接打印这个值，没必要依赖状态变量：

const [name, setName] = useState("Dan");

const handleClick = () => {
  const newName = "Tom";
  setName(newName);
  console.log(newName); // 直接打印新值，结果是"Tom"
};

这种方式最简单，适合新值是固定或提前计算好的场景。

2. 使用useRef同步保存最新状态 #

用useRef创建一个引用，每次更新状态时同步更新这个引用，之后可以通过ref.current获取最新值：

import { useState, useRef } from "react";

function App() {
  const [name, setName] = useState("Dan");
  const nameRef = useRef(name); // 初始化ref值

  const handleClick = () => {
    const newName = "Tom";
    setName(newName);
    nameRef.current = newName; // 同步更新ref
    console.log(nameRef.current); // 打印"Tom"
  };

  return <button onClick={handleClick}>Change Name</button>;
}

useRef的.current属性是可变的，不会触发组件重新渲染，能实时同步最新状态。

3. 使用flushSync强制同步更新 #

ReactDOM提供了flushSync方法，可以强制React同步执行状态更新，这样后续代码就能立即拿到新的状态值：

import { useState } from "react";
import { flushSync } from "react-dom";

function App() {
  const [name, setName] = useState("Dan");

  const handleClick = () => {
    flushSync(() => {
      setName("Tom");
    });
    console.log(name); // 现在能打印"Tom"了
  };

  return <button onClick={handleClick}>Change Name</button>;
}

注意：flushSync会强制React立即更新DOM，可能会影响性能，除非必要不建议频繁使用。

补充：基于旧状态更新的场景 #

如果你的新状态是基于旧状态计算的（比如setName(prev => prev + " Smith")），可以在更新函数内部获取最新值并处理：

const handleClick = () => {
  setName(prevName => {
    const newName = prevName + " Smith";
    console.log(newName); // 这里能拿到新值
    return newName;
  });
};

这种方式利用了setState的函数形式，在函数内部可以直接获取并使用最新的状态值。

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