Recoil React：设置状态变量后无法立即获取最新值的问题

问题代码 #

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32
});

const [tempF, setTempF] = useRecoilState(tempFahrenheit);

const handleClick = (temp: number) => {
  flushSync(() => {
    setTempF(temp);
  });
  flushSync(() => {
    console.log(tempF);
  });
};

问题描述 #

触发onClick事件时，上述代码打印结果始终为32。即便使用依赖tempFahrenheit atom的Recoil selector，在点击事件中调用也只能获取旧值32。尝试通过React 18的flushSync关闭批量更新，仍无法获取最新状态值。

原因解析 #

tempF是组件当前渲染周期中捕获的状态快照，在当前函数执行栈内，setTempF调用只会标记状态需要更新，但不会同步修改tempF变量本身。flushSync仅强制React同步刷新DOM，无法改变当前闭包中已捕获的状态值，这是React和Recoil状态机制的固有特性。

解决方案 #

1. 直接使用传入的目标值
   如果只是需要确认更新后的数值，直接使用点击事件传入的temp参数即可，它就是你要设置的最新状态值：

const handleClick = (temp: number) => {
  flushSync(() => {
    setTempF(temp);
  });
  console.log(temp);
};

2. 使用useRecoilCallback获取最新状态
   如果需要基于最新的Recoil状态执行后续逻辑，Recoil提供的useRecoilCallback钩子能直接访问最新状态：

const handleClick = useRecoilCallback(({ set, snapshot }) => async (temp: number) => {
  set(tempFahrenheit, temp);
  const latestTemp = await snapshot.getPromise(tempFahrenheit);
  console.log(latestTemp);
}, []);

3. 通过useEffect监听状态变化
   若需在状态更新后自动执行操作，可使用useEffect监听tempF的变化：

useEffect(() => {
  console.log(tempF);
}, [tempF]);

const handleClick = (temp: number) => {
  setTempF(temp);
};

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