React 18のSuspenseについて

こんばんは。

今日は「React 18のSuspenseについて」について説明します。

Suspenseは、Reactコンポーネントが非同期のデータを必要とする際に、そのコンポーネントが「読み込み中」であることをReactに伝える仕組みです。これにより、データの取得が完了するまでコンポーネントのレンダリングを遅延させたり、ローディングインディケーターを表示することができます。

React 18でのSuspenseの主な改良

React Server Components

React 18では、Server Componentsが追加され、サーバーサイドで非同期データを直接フェッチしてクライアントに渡すという新しいパターンが可能になりました。Suspenseはこれをサポートしており、サーバーからのデータ取得を待機してからUIを描画することができます。

データフェッチのためのSuspense

React 18では、Suspenseを使って非同期のデータ取得をサポートするために、React Suspense Data Fetchingという新しいAPIが導入されました。このAPIを使用すると、Suspenseのコンポーネントが非同期のデータを待機している間に、Reactがローディング状態やエラーハンドリングを簡単に行うことができます。

並列非同期処理

React 18では、複数の非同期操作が並列で実行される際の処理が改善されました。これにより、データ取得が複数のコンポーネント間で分散している場合でも、効率的に並行して読み込むことができます。

Suspenseの使い方

通常、Suspenseを使用する際には、fallbackプロパティを指定して、データが読み込まれていない間に表示されるコンテンツ（例えば、ローディングインジケーター）を定義します。以下は、React 18での基本的な例です。

例 1: Suspenseを使った非同期データのフェッチ

import React, { Suspense } from 'react';

// 非同期データをフェッチするコンポーネント
function MyComponent() {
  const data = fetchData(); // 非同期データ取得
  return <div>{data}</div>;
}

// Suspenseを使ってローディングインジケーターを表示
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

例 2: React QueryとSuspenseの統合

React Queryのような外部ライブラリと組み合わせることで、より強力な非同期データ管理が可能です。React QueryはSuspenseをサポートしており、データがローディング中の間にUIを遅延させることができます。

import React, { Suspense } from 'react';
import { useQuery } from 'react-query';

// 非同期データをフェッチするフック
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(res => res.json());
}

function MyComponent() {
  const { data } = useQuery('data', fetchData, { suspense: true });
  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

注意点

エラーバウンダリ

Suspenseは非同期処理が失敗した場合、エラーを表示する方法を提供しません。そのため、ErrorBoundaryを使用して、エラーが発生した場合に適切に処理することが推奨されます。

並行レンダリングの有効化

React 18では、並行レンダリング（Concurrent Rendering）がデフォルトで有効になり、Suspenseがより強力に動作します。非同期の操作が行われている間に他の作業を並行して行うことができます。

結論

React 18のSuspenseは、コード分割やデータフェッチの待機など、非同期処理をより効率的に扱うための重要なツールです。これにより、ユーザー体験が大幅に向上し、より滑らかなUIの遷移が可能になります。また、React QueryやGraphQLといったデータ管理ライブラリと組み合わせることで、さらに強力な非同期処理が実現できます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。