React Suspense

コンポーネントを「ローディング中なのでまだレンダリングできない」という状態にすることができるのが特徴です。ReactはコンポーネントをレンダリングしてDOM（など）に反映することが役割のライブラリなので、ローディングできないコンポーネントがあるということはレンダリング結果が無くてDOMへの反映もできないということになってしまいます。

そこで、Suspenseというコンポーネントが、内部でレンダリングが失敗したコンポーネントのハンドリングを担当してくれます。

Suspenseコンポーネントで囲った部分でサスペンドが発生した場合、あらかじめ指定してあったフォールバックコンテンツが代わりにレンダリングされます。次の例は、MyComponentをレンダリングするが、レンダリングできなかった（サスペンドした）場合はfallbackを代わりにレンダリングするという意味になっています。

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