Suspense

DOC: https://ja.react.dev/reference/react/Suspense

https://zenn.dev/uhyo/books/react-concurrent-handson/viewer/what-is-suspense

Suspenseを用いると...

• コンポーネントがローディング中の表示の責務を負わない

• API実行時のローディング状態の記述がより宣言的にできる

• Suspenseを適切に分割することで、UXの向上を狙える

  • Suspense単位でストリーミングされたり、ハイドレーションされるので「どの範囲をSuspenseで囲むか」という設計が重要

• 非同期処理からその非同期性を隠蔽

• コンポーネントがレンダリング中（関数コンポーネントの関数本体を実行中）にPromiseをthrowする(「ローディング中」を宣言)

  • 「このPromiseが解決するまではコンポーネントをレンダリングできない」

  https://qiita.com/uhyo/items/255760315ca61544fe33 (「Promiseをthrowする」について)

• コンポーネントがPromiseをthrowした場合、そのコンポーネントはサスペンドしたと言う

import { VFC } from "react";

const sleep = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

/**
 * 必ずsuspendするコンポーネント
 */
export const AlwaysSuspend: VFC = () => {
  // console.log("AlwaysSuspend is rendered");
  throw sleep(1000); // **Promiseをthrow**
};

• サスペンドが発生したらその部分だけでなく周りも巻き込んで表示できなくなる
  • 周りへの影響を避けるためには、サスペンドが発生するコンポーネントを、Suspenseコンポーネントで囲む
  • Suspenseコンポーネントはサスペンドの境界を定義する

import { Suspense } from "react";

<Suspense fallback={<div>サスペンドしたらこれが表示される</div>}>
  {/* ↓サスペンドしなかったらこれが表示される */}
  <MyComponent />
</Suspense>