問題一覧に戻る
中級高度なパターン
問題67: Suspense基礎

Suspenseを使用して非同期コンポーネントのローディング状態を管理する方法を学びます。データ取得中にローディングUIを表示し、ユーザー体験を向上させます。コンポーネントがPromiseをthrowすると、Suspenseがそれをキャッチしてfallbackを表示します。React 18ではデータフェッチングにも対応し、宣言的なローディング状態管理が可能になりました。

import React, { Suspense } from 'react';

{/* 非同期コンポーネント */}
const AsyncData = () => {
  const data = fetchData(); // Throws promise
  return <h1>{data}</h1>;
};

function App() {
  return (
    {/* Suspenseラッパー */}
    < fallback={<div></div>}>
      <AsyncData />
    </>
  );
}

export default App;