BFE.devでのAI解答例 - React クイズ
7. Suspense 1

このReactコードは、fetcherというプロパティと、get関数を持つオブジェクト、resourceを定義しています。get関数は、dataがロードされるまでpendingステータスを返し、その後はreadyステータスでdataを返します。dataがない場合、get関数はfetchを開始してdataを取得しにいきます。

Appコンポーネント内で、Suspenseコンポーネントを使用してフォールバックを設定し、その中でAコンポーネントを呼び出します。Aコンポーネント内では、resource.get()関数が呼び出され、dataが取得されます。

Suspenseコンポーネントがフォールバック状態になると、Fallbackコンポーネントがそれを置き換えます。この際、FallbackコンポーネントもAコンポーネントと同様に、console.logが使用可能です。

結果として、このコードがレンダリングされた場合、consoleには次のように表示されます:

App
A1
fallback
A2

最初はAppコンポーネントから呼び出され、次にAコンポーネントが呼び出されます。しかしdataはまだ取得されていないので、Suspenseコンポーネントはfallbackになります。それによりFallbackコンポーネント内のコンソールログが表示されます。

その後、dataが取得され、A2がログに表示され、Aコンポーネント内に取得されたデータが表示されます。