Reactjs 为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态，而不是呈现<>

为了理解react的<Suspense>组件，我try 使用setTimeout编写一个简单的钩子，在渲染之前触发一段时间的"暂停"状态.

在我的测试中，我使用了以下设置:

import { Suspense, useMemo, useState } from "react";

function useSuspend(ms: number) {
  const [isSuspended, setSuspended] = useState(true);
  const promise = useMemo(
    () =>
      new Promise<void>((resolve) => {
        setTimeout(() => {
          setSuspended(false);
          resolve();
        }, ms);
      }),
    [ms]
  );

  console.table({ isSuspended, ms });
  if (isSuspended) {
    throw promise;
  }
}

function Suspending() {
  const [id] = useState(Math.random().toFixed(20));
  console.log(id);

  useSuspend(2500);

  return "Done";
}

export default function Main() {
  return (
    <Suspense fallback={"Loading..."}>
      <Suspending />
    </Suspense>
  );
}

然而，这产生了一些(对我来说)相当意外的日志(log)打印:

0.91830134558829579206
┌─────────────┬────────┐
│   (index)   │ Values │
├─────────────┼────────┤
│ isSuspended │  true  │
│     ms      │  2500  │
└─────────────┴────────┘

(2.5s pause)

0.33716150767738661820
┌─────────────┬────────┐
│   (index)   │ Values │
├─────────────┼────────┤
│ isSuspended │  true  │
│     ms      │  2500  │
└─────────────┴────────┘

(continues infinitely every 2.5s forever)

文本"完成"也从未呈现.

这些日志(log)似乎表明<Suspending />组件在useSuspend钩子完成后并不保留其状态，提示组件呈现为"as if new"，这对我来说是违反直觉的.