Agile育成ブログ
未来を変える喜びを
未分類

React Suspense

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

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

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

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