見出し画像
Photo by pansansui

【React 18の新常識】if (loading) はもう古い？ Suspense でデータの読み込みを「宣言的」に待ち構える

関野泰宏


いよいよ完走まであと5日。95日目に「優先順位（Transition）」を学び、アプリの「滑らかさ」を追求しました。本日96日目は、React 18のもう一つの目玉であり、モダン開発の必須知識「Suspense と Data Fetching（データの読み込み待機）」　を学習します。

「Loading...」の文字をあちこちに散りばめるのはもうおしまい。宣言的に「待機中」をデザインする方法をマスターしましょう！

はじめに：コンポーネントが「Loading」で汚れていませんか？

データを取得するコンポーネントを作る際、いつもこんな風に書いていませんか？

if (isLoading) return <Spinner />;
if (error) return <ErrorMessage />;
return <DataContent />;

これをすべてのコンポーネントで繰り返すと、本質的なロジックが埋もれてしまいます。Suspense（サスペンス） を使えば、「データが準備できるまで、外側で待機用のUIを出す」という役割分担が可能になります。

💡 1. Suspense の基本構造

Suspense は、子コンポーネントが「まだ準備ができていない（中断している）」状態であることを検知し、代わりに fallback に指定したUIを表示します。

💻 実装例：コンポーネントを Suspense で包む

import { Suspense } from 'react';

const App = () => {
  return (
    <div className="container">
      <h1>ユーザー情報</h1>
      
      {/* 💡 データ取得が終わるまで Skeleton を出す */}
      <Suspense fallback={<Skeleton />}>
        <UserProfile />
      </Suspense>
      
      <Suspense fallback={<p>読み込み中...</p>}>
        <UserPosts />
      </Suspense>
    </div>
  );
};

💡 2. なぜ Suspense が革命的なのか？

  1. ウォーターフォール（数珠つなぎ）の解消: 複数のコンポーネントがバラバラにデータを取ってくる際、並列で読み込みを開始し、準備ができた順に表示できます。

  2. UIの一貫性: 「ヘッダーが出て、1秒後にサイドバーが出て、2秒後にメインコンテンツが出る」といったガタつきを、親の Suspense でひとまとめに待つことで防げます。

  3. 責務の分離: コンポーネント自身は「データがある前提」でコードを書けるようになり、読み込み中の処理は親（Suspense）に任せられます。

💡 3. 実践的な組み合わせ：React Query (TanStack Query)

Suspense を本領発揮させるには、React Query などのライブラリと組み合わせるのが一般的です。

const UserProfile = () => {
  // 💡 suspense: true オプションを使う
  const { data } = useQuery({ queryKey: ['user'], queryFn: fetchUser, suspense: true });
  
  // 💡 ここでは loading 判定が不要！データがある前提で書ける
  return <div>{data.name}</div>;
};

📝 96日目のまとめと課題

✅ 本日の習得ポイント

  • Suspense: コンポーネントの「未準備」状態を外側から制御する仕組み。

  • 宣言的UI: 「どう待つか」を fallback プロパティで定義する。

  • UXの向上: スケルトンスクリーンなどを使い、ユーザーに「進捗」を心地よく伝える。

📝 96日目の課題

  1. これまでに作ったアプリの「読み込み中」の処理を、Suspense と fallback を使った形式に書き換えてみましょう。

  2. 余裕があれば、ErrorBoundary（80日目に学習）と組み合わせて、「成功・待機・失敗」を完璧にガードする構成を作ってみてください。

もっとReactを学びたい人はここから！

#エンジニアと繋がりたい #プログラミング学習 #React #100DaysOfCode #今日の積み上げ #Suspense #React18

いいなと思ったら応援しよう！