使用useTransition处理重计算时isPending为何不立即变为true？

我正在测试一个会阻塞UI渲染的重计算逻辑，尝试使用useTransition Hook来解决该问题，并在更新过程中显示加载状态。

App.tsx

import { useEffect, useState, useTransition } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    console.log("Starting Transition...");
    startTransition(() => {
      for (let i = 0; i < 1000000000; i++) {}
      setCount((prevCount) => prevCount + 1);
      console.log("Ending Transition...");
    });
  };

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

  return (
    <div className="App">
      <div>
        <h1>{count}</h1>
        <button disabled={isPending} onClick={handleClick}>
          {isPending ? "Loading..." : "Increment"}
        </button>
      </div>
      {isPending && "Loading"}
    </div>
  );
}

问题在于isPending仅在useTransition执行完成后短暂变为true，点击按钮时的日志如下：

Logs

Starting Transition...
Ending Transition...
true
false

我的疑问是：为何isPending不在过渡开始时变为true，反而在过渡结束后才触发？

问题原因 #

你在startTransition的回调里写了同步的重型循环，直接阻塞了JavaScript主线程。React的useTransition工作流程是：调用startTransition后，会先标记后续状态更新为过渡任务，再尝试立即更新isPending为true，但主线程被你的同步循环完全占用，React的渲染队列被挂起，根本没时间处理isPending的状态更新。只有当循环执行完毕、主线程空闲后，React才能处理之前堆积的状态更新，此时过渡任务已经接近完成，所以你看到isPending只在最后短暂闪一下。

解决方法 #

要让isPending及时触发，必须避免同步阻塞主线程。可以把重型计算逻辑改成异步执行，或者用Web Worker处理（适合超重型计算）。这里用setTimeout把循环包装成异步任务是最简单的验证方式：

const handleClick = () => {
  console.log("Starting Transition...");
  startTransition(() => {
    setTimeout(() => {
      for (let i = 0; i < 1000000000; i++) {}
      setCount((prevCount) => prevCount + 1);
      console.log("Ending Transition...");
    }, 0);
  });
};

修改后，主线程会先完成startTransition的同步逻辑，React能及时更新isPending为true，让UI显示加载状态；之后异步循环才会在主线程空闲时执行，完成后更新count，最后isPending变回false。此时日志顺序会变成：

Starting Transition...
true
Ending Transition...
false

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