为什么React函数内获取的state未同步更新？

我有一个用于渲染对象表格的组件，该组件内置一个按钮，点击按钮时会向父组件传递指定对象。父组件需将该对象存入state以完成相关图形内容的渲染。目前页面渲染逻辑运行正常，但我无法理解为何在正确执行state更新操作后，读取到的仍是过时的旧值。
这并非竞态条件问题：即使组件已经正确触发重渲染，React仍然无法读取到变量的更新值。

以下是最小复现示例：

import { useState } from "react";
import { SomeComponent } from "./SomeComponent";

export default function App() {
  const [currentID, setCurrentID] = useState(null);

  function getData() {
    console.log("Getting data of: ", currentID); // 问题：此处打印为null
  }

  function setAndRetrieveData(value) {
    setCurrentID(value);

    // 仅用于验证问题、排除竞态条件影响
    setTimeout(() => {
      getData();
    }, 1500);
  }

  return (
    <div className="App">
      <h1>Current ID: {currentID}</h1> {/* 此处渲染正常，能拿到更新后的值 */}
      <SomeComponent getInfoFor={setAndRetrieveData} />
    </div>
  );
}

SomeComponent组件代码：

export function SomeComponent(props) {
  const randomID = 45;

  return <button onClick={() => props.getInfoFor(randomID)}>Get info</button>;
}

即使使用useStateCallback这类第三方方案，该问题仍然存在。

有没有无需使用useEffect的实现方式？我认为useEffect会降低代码可读性：原本的业务逻辑是「按下按钮时发起请求获取对应信息」，如果使用useEffect，逻辑会变为「当currentID值变化时发起请求」，后续如果我需要修改该state变量、执行非服务端数据拉取的其他操作时，会产生不必要的逻辑耦合。

这是React函数组件的闭包快照特性导致的，和竞态、setState异步延迟都没关系：

• 每次组件重渲染时，所有内部定义的函数都会重新创建，捕获的是当次渲染周期内的state/props值，生成独立的闭包快照，值不会随后续state更新变化
• 点击按钮触发的setAndRetrieveData是点击发生时对应渲染批次的函数，它内部闭包捕获的currentID永远是那次渲染的值（也就是初始的null）。哪怕加了1.5s延迟、哪怕state已经更新触发了重渲染，setTimeout回调里调用的getData还是旧渲染周期生成的函数，拿到的自然是旧的null值
• 页面上<h1>能正常显示最新值，是因为重渲染时新的JSX执行用了新渲染周期的currentID，和闭包里留存的旧函数引用不是同一个上下文
• 第三方useStateCallback类方案之所以失效，本质也是没有绕开闭包快照的限制，没有持有最新值的稳定引用

最优方案（完全无需useEffect，零耦合） #

你的业务逻辑触发点本来就是「点击按钮拿到目标ID」，这个ID在setAndRetrieveData的入参value里已经拿到了，根本不需要等state更新完再反向从state里读值。state只负责驱动视图渲染即可，后续的数据请求逻辑直接用入参的value就行，完全贴合原有业务逻辑，没有任何额外耦合：

import { useState } from "react";
import { SomeComponent } from "./SomeComponent";

export default function App() {
  const [currentID, setCurrentID] = useState(null);

  // 把需要的ID作为参数传入，不依赖闭包中的state
  function getData(targetID) {
    console.log("Getting data of: ", targetID);
    // 后续数据拉取、渲染逻辑直接用传入的targetID即可
  }

  function setAndRetrieveData(value) {
    setCurrentID(value);
    // 直接使用当前拿到的value调用逻辑，绕开闭包问题
    getData(value);
  }

  return (
    <div className="App">
      <h1>Current ID: {currentID}</h1>
      <SomeComponent getInfoFor={setAndRetrieveData} />
    </div>
  );
}

通用方案（需要跨上下文读最新值时使用） #

如果你的业务场景确实需要在任意闭包里读到state的最新值，又不想把业务逻辑写在useEffect里，可以用useRef存一份state的镜像——ref的值是稳定引用，所有闭包都能读到它的最新值，且更新不会触发重渲染。这里的useEffect只做state到ref的同步，不承载任何业务逻辑，不会产生耦合：

import { useState, useRef, useEffect } from "react";
import { SomeComponent } from "./SomeComponent";

export default function App() {
  const [currentID, setCurrentID] = useState(null);
  // 用ref存最新值的稳定引用
  const currentIDRef = useRef(currentID);

  // 仅做state和ref的同步，不写任何业务逻辑
  useEffect(() => {
    currentIDRef.current = currentID;
  }, [currentID]);

  function getData() {
    // 从ref读取永远拿到最新值
    console.log("Getting data of: ", currentIDRef.current);
  }

  function setAndRetrieveData(value) {
    setCurrentID(value);
    setTimeout(() => {
      getData();
    }, 1500);
  }

  return (
    <div className="App">
      <h1>Current ID: {currentID}</h1>
      <SomeComponent getInfoFor={setAndRetrieveData} />
    </div>
  );
}

日常开发中优先用第一种方案，符合React单向数据流的逻辑，代码最简洁也最容易维护，完全避开闭包问题。

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