为什么在使用计算量大的useTransition时isPending没有立即变为true?

我正在测试一个繁重的计算,它会阻止我的UI的渲染,并使用 useTransition 钩子来修复它,并在更新时显示加载情况。

附录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 在事件发生后不久,它就变成了真 使用转换 当我点击按钮时,日志如下:

日志

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

我的问题是为什么 待定 当过渡开始时,而不是结束后,这不是真的吗?