React Suspenseとは？現役エンジニアが初心者向けにわかりやすく解説！

2024-07-14

当サイトでは一部リンクに広告が含まれています

React Suspenseは、Reactアプリケーションにおける非同期処理を扱うための強力な機能です。

この記事では、React Suspenseの基本概念から実践的な使用方法まで、初心者にもわかりやすく解説していきます！

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

React Suspenseとは？

React SuspenseはReact 16.6で初めて導入されましたが、当初はDynamic importのためだけに使用されていました。しかし、React 18でついに正式版となり、その機能は大幅に拡張されました。

React 16.6: Dynamic import専用
React 18: データフェッチングなど、より広範な非同期処理に対応

React Suspenseの基本概念

React Suspenseの核心は、コンポーネントを「ローディング中」の状態にできるということです。これにより、非同期処理の完了を待つ間、ユーザーに適切なフィードバックを提供できます。

非同期処理中はフォールバックコンテンツを表示
処理完了後に本来のコンテンツを表示
コンポーネントツリー全体の一貫性を保証

React Suspenseの使い方

基本的な構文

React Suspenseの基本的な使い方は以下のとおりです：

<Suspense fallback={<Loading />}>
  <ComponentThatMightSuspend />
</Suspense>

ここで、fallbackプロップには非同期処理中に表示するコンポーネントを指定します。

データフェッチングでのSuspenseの使用

React 18以降、Suspenseはデータフェッチングにも対応しています。以下は基本的な実装例です：

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfilePosts />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfilePosts() {
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

この例では、ProfileDetailsとProfilePostsが非同期でデータを読み込んでいます。Suspenseを使用することで、それぞれのコンポーネントのローディング状態を個別に管理できます。