目次

Suspenseとは？
Suspenseのインポート
Suspenseの使い方
Loading部分を作ってみよう

Suspenseとは？

ReactのSuspense機能を使うと、ローディング中とローディング後に表示したいものを簡単に管理することができます。

Suspenseとはサスペンスドラマのサスペンスと同じ意味で、「これから何か起きる！ドキドキハラハラ」と同じ状況を作り出します。

何かが起きるまで待っている間＝ローディング中、
何かが起きた＝ローディング後
のようなイメージです。

なのでSuspenseを使うことでローディング中はローディングの表示をして、ローディングが完了したら表示したかったものを表示するといったシンプルな仕組みです。

Suspenseのインポート

こんな感じでimportします。

import { Suspense } from `react`;

Suspenseの使い方

Suspenseは以下のように使います。

<Suspense fallback={<Loader />}>
  <SomeComponent />
</Suspense>

ローディング中に表示したいコンポーネントはfallbackで設定します。ローディングが完了した時に表示されるのは<Suspense></Suspense>で囲ったコンポーネントになります。つまりローディング中はLoadingというコンポーネントが表示されて、ローディングが終わったらSomeComponentというコンポーネントが表示されます。

Suspense機能のロジックは、Promiseをthrowすることによって「ローディング中なのでレンダリングできない」という状態を作っています。

Loading部分を作ってみよう

Loadingコンポーネントも作ってみましょう。

ローディング中の数値を取得するにはuseProgressをインポートします。HTMLとして記述できるようにHtmlもインポートします。インポート先はreact-three/dreiです。これはreact-three/fiber用のヘルパー関数などを提供してくれるライブラリです。

import { Html, useProgress } from '@react-three/drei'

const Loader = () => {
  const { progress } = useProgress()
  return <Html>{progress} % loaded</Html>
}

まとめ

Suspenseの使い方はシンプルでした。ローディング中とローディング後に表示したいものがあっさり書けちゃいました。

<Suspense fallback={<ローディング中のコンポーネント />}>
  <ローディング完了後のコンポーネント />
</Suspense>

ローディング中に表示するコンポーネントではuseProgressを使用することで、数値を表示することができました。

これでSuspenseを使ったローディング中の表示はバッチリですね！