React の Suspense コンポーネントで、fallback に指定した UI が表示されるのはどのようなときですか？

解説

正解は「子コンポーネントがサスペンド（読み込み待ちで一時停止）したとき」です。<Suspense> は、配下のコンポーネントが表示に必要なコードやデータをまだ用意できていない間、代わりに fallback に渡した UI を表示する仕組みです。Suspense の基本的な使い方代表的な例は lazy（コンポーネントを必要になったときに読み込む機能）との組み合わせです。import { lazy, Suspense } from 'react'; // 初めて描画されるときにファイルを読み込む。読み込み中はサスペンドする const Chart = lazy(() => import('./Chart')); export default function App() { return ( // Chart の読み込みが終わるまで fallback を表示する <Suspense fallback={<p>読み込み中...</p>}> <Chart /> </Suspense> ); }読み込みが完了すると、React が自動的に fallback を本来のコンポーネントに置き換えます。useEffect で fetch しても fallback は表示されない「useEffect 内で fetch」を選んだ場合、Suspense があらゆる非同期処理を検知すると考えているかもしれません。実際に Suspense が反応するのは、lazy、use フック、Suspense に対応したフレームワークやライブラリ（Next.js、TanStack Query など）によるサスペンドだけです。useEffect 内の fetch は描画が終わった後に実行されるため Suspense からは見えず、ローディング表示は自前の state で管理する必要があります。その他の選択肢について「子コンポーネントでエラーが投げられ」: エラー時の代替表示は Error Boundary（エラー境界）の役割で、Suspense は担当しません。「子コンポーネントの初回レンダリング時に」: 子がサスペンドしなければ fallback は一度も表示されず、子がそのまま描画されます。参考<Suspense> – React