cache

const cachedFn = cache(fn);

• リファレンス
  • cache(fn)
• 使用法
  • 高コストな計算をキャッシュする
  • データのスナップショットを共有する
  • データをプリロードする
• トラブルシューティング
  • メモ化された関数が、同じ引数で呼び出されても実行される

リファレンス

cache(fn)

キャッシュを持つバージョンの関数を作成するために、コンポーネントの外部で cache を呼び出します。

import {cache} from 'react';
import calculateMetrics from 'lib/metrics';

const getMetrics = cache(calculateMetrics);

function Chart({data}) {
  const report = getMetrics(data);
  // ...
}

getMetrics が初めて data とともに呼び出されると、getMetrics は calculateMetrics(data) を呼び出し、その結果をキャッシュに保存します。もし getMetrics が同じ data で再度呼び出されると、calculateMetrics(data) を再度呼び出す代わりにキャッシュされた結果を返します。

さらに例を見る

引数

• fn: 結果をキャッシュしたい関数です。fn は任意の引数を取り、任意の値を返すことができます。

返り値

cache は、同じ型シグネチャを持つ fn のキャッシュされているバージョンを返します。その処理の中で fn は呼び出されません。

与えられた引数で cachedFn を呼び出すと、まずキャッシュにキャッシュされた結果が存在するかどうかを確認します。キャッシュされた結果が存在する場合、その結果を返します。存在しない場合、引数で fn を呼び出し、結果をキャッシュに保存し、その結果を返します。fn が呼び出されるのはキャッシュミスが発生したときだけです。

注意点

• React は、各サーバーリクエストごとにすべてのメモ化された関数のキャッシュを無効化します。
• cache を呼び出すたびに新しい関数が作成されます。これは、同じ関数で cache を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。
• cachedFn はエラーもキャッシュします。特定の引数で fn がエラーをスローすると、それがキャッシュされ、同じ引数で cachedFn が呼び出されると同じエラーが再スローされます。
• cache は、サーバコンポーネント でのみ使用できます。

使用法

高コストな計算をキャッシュする

重複する処理をスキップするために cache を使用します。

import {cache} from 'react';
import calculateUserMetrics from 'lib/user';

const getUserMetrics = cache(calculateUserMetrics);

function Profile({user}) {
  const metrics = getUserMetrics(user);
  // ...
}

function TeamReport({users}) {
  for (let user in users) {
    const metrics = getUserMetrics(user);
    // ...
  }
  // ...
}

同じ user オブジェクトが Profile と TeamReport の両方でレンダーされる場合、2つのコンポーネントは処理を共有でき、その user に対して calculateUserMetrics を一度だけ呼び出します。

最初に Profile がレンダーされると仮定します。getUserMetrics が呼び出され、キャッシュされた結果があるかどうかを確認します。その user で getUserMetrics を呼び出すのは初めてなので、キャッシュミスが発生します。getUserMetrics はその後、その user で calculateUserMetrics を呼び出し、結果をキャッシュに書き込みます。

TeamReport が users のリストをレンダーし、同じ user オブジェクトに到達すると、getUserMetrics を呼び出し、結果をキャッシュから読み取ります。

// Temperature.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

export function Temperature({cityData}) {
  // 🚩 Wrong: Calling `cache` in component creates new `getWeekReport` for each render
  const getWeekReport = cache(calculateWeekReport);
  const report = getWeekReport(cityData);
  // ...
}

// Precipitation.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

// 🚩 Wrong: `getWeekReport` is only accessible for `Precipitation` component.
const getWeekReport = cache(calculateWeekReport);

export function Precipitation({cityData}) {
  const report = getWeekReport(cityData);
  // ...
}

// getWeekReport.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

export default cache(calculateWeekReport);

// Temperature.js
import getWeekReport from './getWeekReport';

export default function Temperature({cityData}) {
	const report = getWeekReport(cityData);
  // ...
}

// Precipitation.js
import getWeekReport from './getWeekReport';

export default function Precipitation({cityData}) {
  const report = getWeekReport(cityData);
  // ...
}

データのスナップショットを共有する

コンポーネント間でデータのスナップショットを共有するためには、fetch のようなデータ取得関数とともに cache を呼び出します。複数のコンポーネントが同じデータを取得すると、リクエストは1回だけ行われ、返されたデータはキャッシュされ、コンポーネント間で共有されます。すべてのコンポーネントはサーバーレンダー全体で同じデータのスナップショットを参照します。

import {cache} from 'react';
import {fetchTemperature} from './api.js';

const getTemperature = cache(async (city) => {
	return await fetchTemperature(city);
});

async function AnimatedWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

async function MinimalWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

AnimatedWeatherCard と MinimalWeatherCard の両方が同じ city でレンダーする場合、メモ化された関数 から同じデータのスナップショットを受け取ります。

AnimatedWeatherCard と MinimalWeatherCard が異なる city 引数を getTemperature に渡した場合、fetchTemperature は2回呼び出され、呼び出したそれぞれで異なるデータを受け取ります。

city はキャッシュキーとして機能します。

async function AnimatedWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

データをプリロードする

長時間実行されるデータ取得をキャッシュすることで、コンポーネントのレンダー前に非同期処理を開始することができます。

const getUser = cache(async (id) => {
  return await db.user.query(id);
}

async function Profile({id}) {
  const user = await getUser(id);
  return (
    <section>
      <img src={user.profilePic} />
      <h2>{user.name}</h2>
    </section>
  );
}

function Page({id}) {
  // ✅ Good: start fetching the user data
  getUser(id);
  // ... some computational work
  return (
    <>
      <Profile id={id} />
    </>
  );
}

Page をレンダーするとき、コンポーネントは getUser を呼び出しますが、返されたデータは使用しません。この早期の getUser 呼び出しは、Page が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。

Profile をレンダーするとき、再び getUser を呼び出します。最初の getUser 呼び出しがすでにユーザーデータを返し、キャッシュしている場合、Profile が このデータを要求し、待機するとき、別のリモートプロシージャ呼び出しを必要とせずにキャッシュからシンプルに読み取ることができます。もし 最初のデータリクエスト がまだ完了していない場合、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。

async function fetchData() {
  return await fetch(`https://...`);
}

const getData = cache(fetchData);

async function MyComponent() {
  getData();
  // ... some computational work  
  await getData();
  // ...
}

import {cache} from 'react';

const getUser = cache(async (userId) => {
  return await db.user.query(userId);
});

// 🚩 Wrong: Calling memoized function outside of component will not memoize.
getUser('demo-id');

async function DemoProfile() {
  // ✅ Good: `getUser` will memoize.
  const user = await getUser('demo-id');
  return <Profile user={user} />;
}

'use client';

function WeatherReport({record}) {
  const avgTemp = useMemo(() => calculateAvg(record)), record);
  // ...
}

function App() {
  const record = getRecord();
  return (
    <>
      <WeatherReport record={record} />
      <WeatherReport record={record} />
    </>
  );
}

const cachedFetchReport = cache(fetchReport);

function WeatherReport({city}) {
  const report = cachedFetchReport(city);
  // ...
}

function App() {
  const city = "Los Angeles";
  return (
    <>
      <WeatherReport city={city} />
      <WeatherReport city={city} />
    </>
  );
}

'use client';

function WeatherReport({record}) {
  const avgTemp = calculateAvg(record); 
  // ...
}

const MemoWeatherReport = memo(WeatherReport);

function App() {
  const record = getRecord();
  return (
    <>
      <MemoWeatherReport record={record} />
      <MemoWeatherReport record={record} />
    </>
  );
}

トラブルシューティング

メモ化された関数が、同じ引数で呼び出されても実行される

以前に述べた落とし穴を参照してください。

• 異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取ります。
• コンポーネントの外部でメモ化関数を呼び出すと、キャッシュは使用されません。

上記のいずれも該当しない場合、Reactがキャッシュに存在するかどうかをチェックする方法に問題があるかもしれません。

引数がプリミティブでない場合（例：オブジェクト、関数、配列）、同じオブジェクト参照を渡していることを確認してください。

メモ化された関数を呼び出すとき、Reactは入力引数を調べて結果がすでにキャッシュされているかどうかを確認します。Reactは引数の浅い等価性を使用してキャッシュヒットがあるかどうかを判断します。

import {cache} from 'react';

const calculateNorm = cache((vector) => {
  // ...
});

function MapMarker(props) {
  // 🚩 Wrong: props is an object that changes every render.
  const length = calculateNorm(props);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}

この場合、2つの MapMarker は同じ処理を行い、calculateNorm を {x: 10, y: 10, z:10} の同じ値で呼び出しているように見えます。オブジェクトが同じ値を含んでいても、それぞれのコンポーネントが自身の props オブジェクトを作成するため、同じオブジェクト参照ではありません。

Reactは入力に対して Object.is を呼び出し、キャッシュヒットがあるかどうかを確認します。

import {cache} from 'react';

const calculateNorm = cache((x, y, z) => {
  // ...
});

function MapMarker(props) {
  // ✅ Good: Pass primitives to memoized function
  const length = calculateNorm(props.x, props.y, props.z);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}

これを解決する一つの方法は、ベクトルの次元を calculateNorm に渡すことです。これは次元自体がプリミティブであるため、機能します。

別の解決策は、ベクトルオブジェクト自体をコンポーネントのpropsとして渡すことかもしれません。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。

import {cache} from 'react';

const calculateNorm = cache((vector) => {
  // ...
});

function MapMarker(props) {
  // ✅ Good: Pass the same `vector` object
  const length = calculateNorm(props.vector);
  // ...
}

function App() {
  const vector = [10, 10, 10];
  return (
    <>
      <MapMarker vector={vector} />
      <MapMarker vector={vector} />
    </>
  );
}