450 - 《React 19 RC 中的 Suspense》

React 19 RC 发布后有一件在社区影响比较大的事是 Suspense 的改动，做下记录。

1、简单说就是之前 <Suspense> 包含的 Promise 会并发执行，现在是串行。

比如：

<Suspense fallback={<p>loading...</p>}>
  <Foo />
  <Bar />
</Suspense>

<Foo /> 和 <Bar /> 中如果有 fetch 请求，之前是会并发执行。为啥？因为 React 遇到 Foo 时虽然会挂起，但依旧会接着往下走去解析 Bar。

2、Promise 不仅仅是数据请求（fetch），一个更常见的是路由按需加载的例子。

const Header = lazy(() => import('./Header.tsx'));
const Navbar = lazy(() => import('./Navbar.tsx'));
const Footer = lazy(() => import('./Footer.tsx'));

<Suspense fallback={<p>loading...</p>}>
  <Header />
  <Navbar />
  <Footer />
</Suspense>

此时，Header、Navbar 和 Footer 也是串行瀑布加载和渲染的，这就很恐怖了。

3、那么，React 团队为什么要这么做？

<Suspense fallback={<p>load