React Cacheで変わるReact開発：使い方とメリット

はじめに：データフェッチの課題とReact Cacheの登場

Reactアプリケーションを開発する上で、外部APIからのデータ取得は避けられない、そして最も一般的な処理の一つです。しかし、この「データフェッチ」は、アプリケーションの複雑さが増すにつれて、開発者を悩ませる種となりがちでした。

従来のReact（特にFunction ComponentとHooksが登場して以降）でデータフェッチを行う最も一般的な方法は、useEffectフックの中で非同期関数（例：fetchやaxiosなど）を呼び出し、その結果をuseStateフックで管理するというものでした。このアプローチは非常に柔軟で強力ですが、いくつかの課題を抱えています。

1. ボイラープレートコードの多さ: データフェッチ、ローディング状態の管理、エラー状態の管理、そしてコンポーネントのアンマウント時のクリーンアップなど、一連の処理を毎回useEffect内に記述する必要があり、コードが冗長になりがちです。
2. データ取得ロジックとUIロジックの密結合: useEffectはコンポーネントのライフサイクルに関連付けられているため、データ取得のロジックが特定のコンポーネント内に閉じ込められやすく、再利用が難しくなります。また、UIのレンダリングとデータ取得の状態（ローディング中か、エラーかなど）が同じコンポーネントで管理されるため、関心の分離が難しくなります。
3. コンポーネントツリー内でのデータフェッチの非効率性（ウォーターフォール）: 複数のコンポーネントが互いに依存するデータを取得する場合、親コンポーネントがフェッチを完了してから子コンポーネントがフェッチを開始するというように、データフェッチが段階的に実行されてしまうことがあります。これは「ウォーターフォール」と呼ばれ、アプリケーション全体のデータ取得に時間がかかり、初期表示が遅くなる原因となります。
4. 重複したデータフェッチ: 同じデータを複数のコンポーネントが必要とする場合、それぞれのコンポーネントが独立して同じAPIエンドポイントにリクエストを送ってしまう可能性があります。これはサーバーへの負荷を増大させるだけでなく、無駄なネットワーク通信を引き起こし、パフォーマンスを低下させます。
5. クライアントサイドでのキャッシュ管理の複雑さ: 一度取得したデータを再利用するためには、明示的にキャッシュを実装する必要があります。これはメモリ内のオブジェクトやContext API、あるいはReduxなどの状態管理ライブラリを使って実現できますが、キャッシュの有効期限、更新、無効化といった管理が非常に複雑になりがちです。多くの場合は、React QueryやSWRのようなサードパーティ製のデータフェッチライブラリに頼ることになります。これらのライブラリは素晴らしい解決策を提供しますが、アプリケーションに新たな依存関係と学習コストをもたらします。

Reactコミュニティは長年これらの課題に取り組んできました。そして、React v18以降で導入されたConcurrent Features（並行モード）と、それに付随するSuspenseという概念が、これらの問題に対する根本的な解決策の道を開きました。Suspenseは「データがまだ準備できていない場合に、レンダリングを一時停止し、フォールバックUIを表示する」という機能を提供します。しかし、Suspenseはあくまで「UI側」の機能であり、データ取得そのものをどう行うか、あるいはその結果をどうキャッシュするかについては、React自身は直接的なAPIを提供していませんでした。

そこで登場するのが、React Cacheです。

React Cache（正確には、現在実験的なAPIとして提供されているcache関数など）は、特定の「関数呼び出しの結果」をメモ化し、キャッシュする機能を提供します。これは一見地味な機能に見えるかもしれませんが、SuspenseやServer Componentsといった新しいReactのパラダイムと組み合わせることで、前述のデータフェッチに関する多くの課題を劇的に改善する可能性を秘めています。

この記事では、React Cacheがどのように機能するのか、その使い方、そしてそれがReact開発にもたらすメリットについて、詳細に掘り下げていきます。約5000語にわたり、基本的な考え方から、SuspenseやServer Componentsとの連携、そして実践的な応用例や注意点までを網羅的に解説します。

React Cacheの基本：cache()関数の理解

React Cacheの核となるのは、cache()という関数です。これは、メモ化（Memoization）の概念を応用したもので、特定の関数を呼び出した際に、その引数と結果のペアを記憶しておき、同じ引数で再度関数が呼び出された場合には、実際の関数を実行せず、記憶しておいた結果を返すという働きをします。

ただし、React Cacheのcache()は、単なるメモ化関数とは少し異なります。Reactのレンダリングサイクルやサスペンスとの連携を前提として設計されており、特に非同期関数の結果をキャッシュし、Suspenseと連携してローディング状態を扱うことに長けています。

cache()関数の基本的なシグネチャは以下のようになります（これはReactの実験的なAPIとして提供されているため、プレフィックスが付くことがあります。例: unstable_cache）：

“`javascript
import { cache } from ‘react’; // あるいは ‘react/experimental’ など

const cachedFn = cache(originalFn);
“`

ここで、originalFnはキャッシュしたい関数です。cache()関数は、originalFnと同じシグネチャを持つ新しい関数cachedFnを返します。このcachedFnを呼び出すと、以下の動作が行われます。

1. cachedFnが特定の引数セットで初めて呼び出された場合、内部的にoriginalFnがその引数で実行されます。その結果（同期的な値、あるいは非同期関数の場合はPromise）が、その引数セットと紐づけられてキャッシュに保存されます。そして、結果が返されます。
2. cachedFnが同じ引数セットで再度呼び出された場合、originalFnは実行されません。代わりに、キャッシュに保存されている以前の結果がすぐに返されます。

重要なのは、「同じ引数セット」がどのように判定されるかです。デフォルトでは、cache()は引数の参照等価性（reference equality）に基づいてキャッシュキーを生成します。つまり、同じ値を持つオブジェクトや配列であっても、異なる参照であれば異なる引数セットと見なされ、キャッシュはヒットしません。プリミティブ型（文字列、数値、真偽値など）の場合は、値が同じであれば同じ引数セットと見なされます。

例:

“`javascript
import { cache } from ‘react’;

// 例1：同期関数のキャッシュ
const calculateSum = cache((a, b) => {
console.log(Calculating sum for ${a}, ${b}...);
return a + b;
});

console.log(calculateSum(2, 3)); // “Calculating sum for 2, 3…”, 5
console.log(calculateSum(2, 3)); // 5 (キャッシュから、ログは出ない)
console.log(calculateSum(5, 1)); // “Calculating sum for 5, 1…”, 6
console.log(calculateSum(2, 3)); // 5 (キャッシュから)

// 例2：非同期関数のキャッシュ
const fetchData = cache(async (id) => {
console.log(Fetching data for ID: ${id}...);
const response = await fetch(/api/items/${id});
if (!response.ok) {
throw new Error(Failed to fetch item ${id});
}
return response.json();
});

// 非同期関数のキャッシュは、Promiseの状態をキャッシュします。
// Suspenseと組み合わせて使用します。
// 例として、コンポーネント内で使用するイメージ：
// async function ItemDisplay({ id }) {
// const item = await fetchData(id); // awaitはServer Componentでのみ可能
// return

;
// }

// Client Componentで使う場合はResourceとしてラップするなど工夫が必要（後述）
“`

この非同期関数のキャッシュが、Reactのデータフェッチ戦略において非常に重要になります。cache()でラップされた非同期関数（Promiseを返す関数）が呼び出されたとき、そのPromiseの状態（Pending, Fulfilled, Rejected）がキャッシュされます。

• PromiseがPendingの場合、キャッシュはPromise自体を保持します。このPromiseを待つコンポーネント（Server Componentでのawaitや、Client ComponentでResourceをuseする場合）はサスペンドします。
• PromiseがFulfilledの場合、解決された値がキャッシュされます。次に同じ引数で呼ばれたときは、すぐにその値が返されます。
• PromiseがRejectedの場合、エラーがキャッシュされます。次に同じ引数で呼ばれたときは、そのエラーがスローされます。これはError Boundaryによって捕捉されることを期待します。

このように、cache()は関数呼び出しとその結果（値またはPromise、エラー）を記憶することで、同じ呼び出しに対する重複した処理を防ぎます。

キャッシュのライフサイクル:

React Cacheのキャッシュは、Reactの実行環境（レンダリングパスやリクエスト）に関連付けられています。サーバーサイドレンダリング（SSR）では、通常1つのリクエストに対して1つのキャッシュインスタンスが使われます。クライアントサイドレンダリング（CSR）やハイドレーションでは、別のキャッシュインスタンスが使われます。これにより、サーバーとクライアントで同じデータフェッチロジックを共有しつつ、それぞれのコンテキストで適切にキャッシュが機能します。

ただし、React Cache自身には、キャッシュの有効期限を設定したり、明示的にキャッシュを無効化したりするための標準的なAPIは提供されていません（少なくとも、コアのcache関数には）。キャッシュの無効化は、Server Actionsなどのフレームワークレベルの機能を利用したり、新しい引数で関数を再度呼び出したり、Reactのレンダリングプロセスを通じて間接的に管理されることが想定されています。この点については、後述の「より進んだ使い方と考慮事項」で詳しく解説します。

React Cacheを使ったデータフェッチ：SuspenseとResourceとの連携

React Cacheの真価は、SuspenseやServer Componentsといった新しいReactの機能と組み合わせることで発揮されます。特に、非同期処理の結果をキャッシュし、それを使ってコンポーネントをサスペンド（一時停止）させるという挙動は、Suspenseによるローディング状態の管理と非常に相性が良いです。

Reactの新しいデータフェッチの考え方では、データ取得を「Resource」として表現することが推奨されます。Resourceは、サスペンド可能なデータソースをラップしたオブジェクトであり、そのデータを読み取るためのread()メソッドを持ちます。read()メソッドを呼び出すと、データが準備できていればその値を返し、まだ準備できていなければサスペンドをトリガーします。

React CacheはこのResourceを作成するための強力な基盤を提供します。cache()でラップした非同期関数は、Resourceのファクトリー関数として機能します。

Resourceの作成（Client Componentsで使用する場合の例）：

Client ComponentsでSuspenseと組み合わせてデータフェッチを行う場合、通常は以下のようなパターンでResourceを作成します。

“`javascript
import { cache } from ‘react’;
// use 関数は ‘react’ または ‘react/experimental’ からインポート

// 1. キャッシュ可能な非同期フェッチ関数を定義
const fetchItem = cache(async (id) => {
console.log([FETCH] Fetching item ${id}...);
const response = await fetch(/api/items/${id});
if (!response.ok) {
throw new Error(Failed to fetch item ${id});
}
const data = await response.json();
// フェッチに時間がかかることをシミュレート
// await new Promise(resolve => setTimeout(resolve, 1000));
return data;
});

// 2. Resourceを作成するファクトリー関数を定義
// この関数は、特定のIDに対するResourceインスタンスを返す
const createItemResource = (id) => {
// cache関数でラップしたフェッチ関数を呼び出し、Promiseを取得
const promise = fetchItem(id);

// Resource オブジェクトを定義
// readメソッドはPromiseの状態に応じて挙動を変える
const resource = {
read() {
// Promiseの状態をチェック
// Pendingならthrow Promise -> Suspenseが捕捉
// Fulfilledならreturn value -> コンポーネントがデータを取得
// Rejectedならthrow error -> Error Boundaryが捕捉
// このあたりの内部的なロジックは、ReactのuseフックやSuspenseのランタイムが面倒を見ます
// 実際には use(promise) のように書くことが多いです
throw promise; // useフックを使わない場合の概念的な動作
},
// 他にも preload メソッドなどを持つことがある（ローディング開始を早める）
};
return resource;
};

// Resource インスタンスの取得
const itemResource1 = createItemResource(1);
const itemResource2 = createItemResource(2);
// 同じIDなら同じpromiseを返す（キャッシュヒット）
const itemResource1_again = createItemResource(1); // キャッシュヒット！ fetchItem(1)は再実行されない
“`

Client Componentでの利用（useフックを使用）：

ResourceをClient Componentで使用する最も推奨される方法は、Reactの新しいuseフック（実験的）を使うことです。useフックはPromiseやContextといったResourceから値を読み取ることができます。特にPromiseに対してuseを使うと、PromiseがPendingの場合はコンポーネントをサスペンドさせ、Fulfilledになれば値を返し、Rejectedになればエラーをスローします。

“`javascript
import { use } from ‘react’; // ‘react’ または ‘react/experimental’ からインポート
import { cache } from ‘react’; // ‘react’ または ‘react/experimental’ からインポート

// 1. キャッシュ可能な非同期フェッチ関数を定義
const fetchItem = cache(async (id) => {
console.log([FETCH] Fetching item ${id}...);
const response = await fetch(/api/items/${id});
if (!response.ok) {
throw new Error(Failed to fetch item ${id});
}
const data = await response.json();
// await new Promise(resolve => setTimeout(resolve, 1000)); // シミュレート
return data;
});

// 2. Resourceを作成せず、use() に直接 promise を渡すパターンも可能
// ただし、Resourceとしてラップする方が柔軟性がある場合も
// 例: Resource内にpreloadロジックなどを含める場合

// Client Component
function ItemDisplay({ id }) {
// useフックでPromiseを読み込む
// fetchItem(id) は cache された Promise を返す
const item = use(fetchItem(id)); // PromiseがPendingならサスペンド

// Promiseが解決されるまで、この部分は実行されない
return (

);
}

// App Component (親コンポーネントなど)
function App() {
return (

}>


{/ 別のSuspenseでラップすることも、同じSuspenseでラップすることも可能 /}
Loading item 2…\