React懒加载与useTransition Hook执行逻辑疑问：为何AdminData先加载？

代码示例 #

import { lazy, Suspense, useState, useTransition } from "react";
const AdminData = lazy(() => import("./AdminData"));

export default function Home() {
  const [isAdmin, setAdmin] = useState(false);
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <h1>Home</h1>
      <button
        onClick={() => {
          import("../sum").then((module) => {
            alert(module.default(2, 2));
          });
        }}
      >
        Add 2+2
      </button>

      <br />
      <br />

      <button
        onClick={() => {
          startTransition(() => {
            setAdmin(!isAdmin);
          });
        }}
      >
        Toggle Admin
      </button>
      {isPending && "Loading...."}
      <Suspense fallback={<h1>Loading...</h1>}>
        {isAdmin ? <AdminData /> : <h2>You are not an Admin</h2>}
      </Suspense>
    </>
  );
}

问题解析与执行流程 #

你产生的"先加载AdminData再调用setAdmin"的错觉，本质是对startTransition和Suspense的协同工作逻辑理解有误，具体执行流程如下：

1. 点击按钮后的初始响应
   点击"Toggle Admin"后，startTransition会立即将isPending设为true，触发一次渲染——此时isAdmin仍为false，页面显示"You are not an Admin" + "Loading...."。

2. 低优先级更新的调度与阻塞
   startTransition将setAdmin(!isAdmin)标记为低优先级更新，React开始处理该更新时：

   • 先将isAdmin设为true，触发组件重渲染，尝试渲染<AdminData />；
   • 由于lazy组件的import还未完成，会抛出一个Promise，触发Suspense的机制；
   • React会暂停本次低优先级更新的DOM提交，等待AdminData加载完成，同时isPending保持true，页面继续显示"Loading...."和旧UI（"You are not an Admin"）。

3. 资源加载完成后的最终渲染
   当AdminData加载完成后，Promise resolve，React才会完成本次更新的提交：

   • isPending变为false，"Loading...."消失；
   • Suspense的fallback不再显示，AdminData组件渲染到页面上。

关键纠正点 #

• 你假设"转换会立即完成"是错误的：如果transition内的更新触发了Suspense（如懒加载组件未加载完成），transition会等待资源加载完毕才会结束，isPending会一直保持true直到资源就绪。
• setAdmin在点击按钮后已经被调用，只是React为了保证UI稳定性，阻塞了更新后的DOM提交，直到懒加载资源就绪，这才让你产生了"先加载组件再执行状态更新"的错觉。

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