From a0510f9a05f6f021acafa2e0b29b7ecea76ee7b5 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Fri, 29 Sep 2023 14:25:33 +0900 Subject: [PATCH] Translate "cache" --- src/content/reference/react/cache.md | 146 +++++++++++++-------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 72fa4bd36..2a7acd081 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -4,14 +4,14 @@ canary: true --- -* `cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components. +* `cache` は、[React サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) と一緒に使用するためのものです。React サーバコンポーネントをサポートする [フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) をご覧ください。 -* `cache` is only available in React’s [Canary](/community/versioning-policy#canary-channel) and [experimental](/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +* `cache` は、React の [Canary](https://react.dev/community/versioning-policy#canary-channel) と [experimental](https://react.dev/community/versioning-policy#experimental-channel) チャンネルでのみ利用可能です。本番環境で `cache` を使用する前に、制限事項を理解してください。[React のリリースチャンネルについてはこちら](/community/versioning-policy#all-release-channels) をご覧ください。 -`cache` lets you cache the result of a data fetch or computation. +`cache` は、fetch や計算した結果をキャッシュすることができます。 ```js const cachedFn = cache(fn); @@ -23,11 +23,11 @@ const cachedFn = cache(fn); --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `cache(fn)` {/*cache*/} -Call `cache` outside of any components to create a version of the function with caching. +キャッシュを持つバージョンの関数を作成するために、コンポーネントの外部で `cache` を呼び出します。 ```js {4,7} import {cache} from 'react'; @@ -41,42 +41,42 @@ function Chart({data}) { } ``` -When `getMetrics` is first called with `data`, `getMetrics` will call `calculateMetrics(data)` and store the result in cache. If `getMetrics` is called again with the same `data`, it will return the cached result instead of calling `calculateMetrics(data)` again. +`getMetrics` が初めて `data` とともに呼び出されると、`getMetrics` は `calculateMetrics(data)` を呼び出し、その結果をキャッシュに保存します。もし `getMetrics` が同じ `data` で再度呼び出されると、`calculateMetrics(data)` を再度呼び出す代わりにキャッシュされた結果を返します。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -- `fn`: The function you want to cache results for. `fn` can take any arguments and return any value. +- `fn`: 結果をキャッシュしたい関数です。`fn` は任意の引数を取り、任意の値を返すことができます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process. +`cache` は、同じ型シグネチャを持つ `fn` のキャッシュされているバージョンを返します。その処理の中で `fn` は呼び出されません。 -When calling `cachedFn` with given arguments, it first checks if a cached result exists in the cache. If a cached result exists, it returns the result. If not, it calls `fn` with the arguments, stores the result in the cache, and returns the result. The only time `fn` is called is when there is a cache miss. +与えられた引数で `cachedFn` を呼び出すと、まずキャッシュにキャッシュされた結果が存在するかどうかを確認します。キャッシュされた結果が存在する場合、その結果を返します。存在しない場合、引数で `fn` を呼び出し、結果をキャッシュに保存し、その結果を返します。`fn` が呼び出されるのはキャッシュミスが発生したときだけです。 -The optimization of caching return values based on inputs is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization). We refer to the function returned from `cache` as a memoized function. +入力に基づいて戻り値をキャッシュする最適化は、[_メモ化_](https://en.wikipedia.org/wiki/Memoization) として知られています。`cache` から返される関数をメモ化された関数と呼びます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} [//]: # 'TODO: add links to Server/Client Component reference once https://github.com/reactjs/react.dev/pull/6177 is merged' -- React will invalidate the cache for all memoized functions for each server request. -- Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache. -- `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments. -- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only. +- React は、各サーバーリクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 +- `cache` を呼び出すたびに新しい関数が作成されます。これは、同じ関数で `cache` を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。 +- `cachedFn` はエラーもキャッシュします。特定の引数で `fn` がエラーをスローすると、それがキャッシュされ、同じ引数で `cachedFn` が呼び出されると同じエラーが再スローされます。 +- `cache` は、[サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Cache an expensive computation {/*cache-expensive-computation*/} +### 高コストな計算をキャッシュする {/*cache-expensive-computation*/} -Use `cache` to skip duplicate work. +重複する処理をスキップするために `cache` を使用します。 ```js [[1, 7, "getUserMetrics(user)"],[2, 13, "getUserMetrics(user)"]] import {cache} from 'react'; @@ -98,17 +98,17 @@ function TeamReport({users}) { } ``` -If the same `user` object is rendered in both `Profile` and `TeamReport`, the two components can share work and only call `calculateUserMetrics` once for that `user`. +同じ `user` オブジェクトが `Profile` と `TeamReport` の両方でレンダーされる場合、2つのコンポーネントは処理を共有でき、その `user` に対して `calculateUserMetrics` を一度だけ呼び出します。 -Assume `Profile` is rendered first. It will call `getUserMetrics`, and check if there is a cached result. Since it is the first time `getUserMetrics` is called with that `user`, there will be a cache miss. `getUserMetrics` will then call `calculateUserMetrics` with that `user` and write the result to cache. +最初に `Profile` がレンダーされると仮定します。`getUserMetrics` が呼び出され、キャッシュされた結果があるかどうかを確認します。その `user` で `getUserMetrics` を呼び出すのは初めてなので、キャッシュミスが発生します。`getUserMetrics` はその後、その `user` で `calculateUserMetrics` を呼び出し、結果をキャッシュに書き込みます。 -When `TeamReport` renders its list of `users` and reaches the same `user` object, it will call `getUserMetrics` and read the result from cache. +`TeamReport` が `users` のリストをレンダーし、同じ `user` オブジェクトに到達すると、`getUserMetrics` を呼び出し、結果をキャッシュから読み取ります。 -##### Calling different memoized functions will read from different caches. {/*pitfall-different-memoized-functions*/} +##### 異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取られます。 {/*pitfall-different-memoized-functions*/} -To access the same cache, components must call the same memoized function. +同じキャッシュにアクセスするためには、コンポーネントは同じメモ化された関数を呼び出さなければなりません。 ```js [[1, 7, "getWeekReport"], [1, 7, "cache(calculateWeekReport)"], [1, 8, "getWeekReport"]] // Temperature.js @@ -137,11 +137,11 @@ export function Precipitation({cityData}) { } ``` -In the above example, `Precipitation` and `Temperature` each call `cache` to create a new memoized function with their own cache look-up. If both components render for the same `cityData`, they will do duplicate work to call `calculateWeekReport`. +上記の例では、`Precipitation` と `Temperature` はそれぞれ `cache` を呼び出して、それぞれ独自のキャッシュの索引を持つ新しいメモ化された関数を作成します。両方のコンポーネントが同じ `cityData` でレンダーする場合、それぞれが `calculateWeekReport` を呼び出すため、重複した処理をすることになります。 -In addition, `Temperature` creates a new memoized function each time the component is rendered which doesn't allow for any cache sharing. +さらに、`Temperature` はコンポーネントがレンダーされるたびに 新しいメモ化された関数 を作成し、キャッシュの共有を許可しません。 -To maximize cache hits and reduce work, the two components should call the same memoized function to access the same cache. Instead, define the memoized function in a dedicated module that can be [`import`-ed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) across components. +キャッシュヒットを最大化し、処理を減らすためには、2 つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。寧ろ、専用のモジュールでメモ化された関数を定義し、コンポーネント間で [`インポート`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) します。 ```js [[3, 5, "export default cache(calculateWeekReport)"]] // getWeekReport.js @@ -170,12 +170,12 @@ export default function Precipitation({cityData}) { // ... } ``` -Here, both components call the same memoized function exported from `./getWeekReport.js` to read and write to the same cache. +ここでは、両方のコンポーネントが `./getWeekReport.js` からエクスポートされた 同じメモ化された関数 を呼び出して、同じキャッシュを読み書きします。 -### Share a snapshot of data {/*take-and-share-snapshot-of-data*/} +### データのスナップショットを共有する {/*take-and-share-snapshot-of-data*/} -To share a snapshot of data between components, call `cache` with a data-fetching function like `fetch`. When multiple components make the same data fetch, only one request is made and the data returned is cached and shared across components. All components refer to the same snapshot of data across the server render. +コンポーネント間でデータのスナップショットを共有するためには、`fetch` のようなデータ取得関数とともに `cache` を呼び出します。複数のコンポーネントが同じデータを取得すると、リクエストは1回だけ行われ、返されたデータはキャッシュされ、コンポーネント間で共有されます。すべてのコンポーネントはサーバーレンダー全体で同じデータのスナップショットを参照します。 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]] import {cache} from 'react'; @@ -196,17 +196,17 @@ async function MinimalWeatherCard({city}) { } ``` -If `AnimatedWeatherCard` and `MinimalWeatherCard` both render for the same city, they will receive the same snapshot of data from the memoized function. +`AnimatedWeatherCard` と `MinimalWeatherCard` の両方が同じ city でレンダーする場合、メモ化された関数 から同じデータのスナップショットを受け取ります。 -If `AnimatedWeatherCard` and `MinimalWeatherCard` supply different city arguments to `getTemperature`, then `fetchTemperature` will be called twice and each call site will receive different data. +`AnimatedWeatherCard` と `MinimalWeatherCard` が異なる city 引数を `getTemperature` に渡した場合、`fetchTemperature` は2回呼び出され、呼び出したそれぞれで異なるデータを受け取ります。 -The city acts as a cache key. +city はキャッシュキーとして機能します。 [//]: # 'TODO: add links to Server Components when merged.' -Asynchronous rendering is only supported for Server Components. +非同期レンダー はサーバコンポーネントでのみサポートされています。 ```js [[3, 1, "async"], [3, 2, "await"]] async function AnimatedWeatherCard({city}) { @@ -219,9 +219,9 @@ async function AnimatedWeatherCard({city}) { -### Preload data {/*preload-data*/} +### データをプリロードする {/*preload-data*/} -By caching a long-running data fetch, you can kick off asynchronous work prior to rendering the component. +長時間実行されるデータ取得をキャッシュすることで、コンポーネントのレンダー前に非同期処理を開始することができます。 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]] const getUser = cache(async (id) => { @@ -250,17 +250,17 @@ function Page({id}) { } ``` -When rendering `Page`, the component calls `getUser` but note that it doesn't use the returned data. This early `getUser` call kicks off the asynchronous database query that occurs while `Page` is doing other computational work and rendering children. +`Page` をレンダーするとき、コンポーネントは `getUser` を呼び出しますが、返されたデータは使用しません。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。 -When rendering `Profile`, we call `getUser` again. If the initial `getUser` call has already returned and cached the user data, when when `Profile` asks and waits for this data, it can simply read from the cache without requiring another remote procedure call. If the initial data request hasn't been completed, preloading data in this pattern reduces delay in data-fetching. +`Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでにユーザーデータを返し、キャッシュしている場合、`Profile` が このデータを要求し、待機するとき、別のリモートプロシージャ呼び出しを必要とせずにキャッシュからシンプルに読み取ることができます。もし 最初のデータリクエスト がまだ完了していない場合、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 -#### Caching asynchronous work {/*caching-asynchronous-work*/} +#### 非同期処理のキャッシュ {/*caching-asynchronous-work*/} -When evaluating an [asynchronous function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), you will receive a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for that work. The promise holds the state of that work (_pending_, _fulfilled_, _failed_) and its eventual settled result. +[非同期関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) を評価するとき、その処理の [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。Promise はその処理の状態（_pending_、_fulfilled_、_failed_）とその最終的な結果を保持します。 -In this example, the asynchronous function `fetchData` returns a promise that is awaiting the `fetch`. +この例では、非同期関数 `fetchData` は `fetch` を待っている Promise を返します。 ```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]] async function fetchData() { @@ -277,18 +277,18 @@ async function MyComponent() { } ``` -In calling `getData` the first time, the promise returned from `fetchData` is cached. Subsequent look-ups will then return the same promise. +最初の `getData` 呼び出しでは、`fetchData` から返された Promise がキャッシュされます。その後のキャッシュ探索では、同じ Promise が返されます。 -Notice that the first `getData` call does not `await` whereas the second does. [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) is a JavaScript operator that will wait and return the settled result of the promise. The first `getData` call simply initiates the `fetch` to cache the promise for the second `getData` to look-up. +最初の `getData` 呼び出しは `await` せず、2回目 は `await` します。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子で、Promise の結果を待って返します。最初の `getData` 呼び出しは単に `fetch` を開始して Promise をキャッシュし、2回目の `getData` で探索します。 -If by the second call the promise is still _pending_, then `await` will pause for the result. The optimization is that while we wait on the `fetch`, React can continue with computational work, thus reducing the wait time for the second call. +2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 -If the promise is already settled, either to an error or the _fulfilled_ result, `await` will return that value immediately. In both outcomes, there is a performance benefit. +Promise がすでに解決している場合、エラーまたは _fulfilled_ の結果になると、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンスの利点があります。 -##### Calling a memoized function outside of a component will not use the cache. {/*pitfall-memoized-call-outside-component*/} +##### コンポーネントの外部でメモ化された関数を呼び出すと、キャッシュは使用されません。{/*pitfall-memoized-call-outside-component*/} ```jsx [[1, 3, "getUser"]] import {cache} from 'react'; @@ -307,21 +307,21 @@ async function DemoProfile() { } ``` -React only provides cache access to the memoized function in a component. When calling `getUser` outside of a component, it will still evaluate the function but not read or update the cache. +React は、コンポーネント内のメモ化された関数に対してのみキャッシュアクセスを提供します。コンポーネントの外部で `getUser` を呼び出すと、関数は評価されますが、キャッシュは読み取られず、更新もされません。 -This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessibile from a component. +これは、キャッシュアクセスがコンポーネントからのみアクセス可能な [コンテクスト](/learn/passing-data-deeply-with-context) を通じて提供されるためです。 -#### When should I use `cache`, [`memo`](/reference/react/memo), or [`useMemo`](/reference/react/useMemo)? {/*cache-memo-usememo*/} +#### `cache`、[`memo`](/reference/react/memo)、[`useMemo`](/reference/react/useMemo) のどれをいつ使うべきですか？{/*cache-memo-usememo*/} -All mentioned APIs offer memoization but the difference is what they're intended to memoize, who can access the cache, and when their cache is invalidated. +上記のすべての API はメモ化を提供しますが、それらが何をメモ化することを意図しているか、誰がキャッシュにアクセスできるか、そしてキャッシュが無効になるタイミングはいつか、という点で違いがあります。 #### `useMemo` {/*deep-dive-use-memo*/} -In general, you should use [`useMemo`](/reference/react/useMemo) for caching a expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component. +一般的に、[`useMemo`](/reference/react/useMemo) は、レンダー間でクライアントコンポーネント内の高コストな計算をキャッシュするために使用すべきです。例えば、コンポーネント内のデータの変換をメモ化するために使用します。 ```jsx {4} 'use client'; @@ -341,13 +341,13 @@ function App() { ); } ``` -In this example, `App` renders two `WeatherReport`s with the same record. Even though both components do the same work, they cannot share work. `useMemo`'s cache is only local to the component. +この例では、`App` は同じレコードで 2 つの `WeatherReport` をレンダーします。両方のコンポーネントが同じ処理を行っていても、処理を共有することはできません。`useMemo` のキャッシュはコンポーネントのローカルにしか存在しません。 -However, `useMemo` does ensure that if `App` re-renders and the `record` object doesn't change, each component instance would skip work and use the memoized value of `avgTemp`. `useMemo` will only cache the last computation of `avgTemp` with the given dependencies. +しかし、`useMemo` は `App` が再レンダーされ、`record` オブジェクトが変わらない場合、各コンポーネントインスタンスは処理をスキップし、`avgTemp` のメモ化された値を使用します。`useMemo` は、与えられた依存関係で `avgTemp` の最後の計算のみをキャッシュします。 #### `cache` {/*deep-dive-cache*/} -In general, you should use `cache` in Server Components to memoize work that can be shared across components. +一般的に、`cache` は、コンポーネント間で共有できる処理をメモ化するために、サーバコンポーネントで使用すべきです。 ```js [[1, 12, ""], [3, 13, ""], [2, 1, "cache(fetchReport)"]] const cachedFetchReport = cache(fetchReport); @@ -367,13 +367,13 @@ function App() { ); } ``` -Re-writing the previous example to use `cache`, in this case the second instance of `WeatherReport` will be able to skip duplicate work and read from the same cache as the first `WeatherReport`. Another difference from the previous example is that `cache` is also recommended for memoizing data fetches, unlike `useMemo` which should only be used for computations. +前の例を `cache` を使用して書き直すと、この場合 2 番目の `WeatherReport` インスタンス は重複する処理をスキップし、最初の `WeatherReport` と同じキャッシュから読み取ることができます。前の例とのもう一つの違いは、`cache` は データフェッチのメモ化 にも推奨されていることで、これは `useMemo` が計算のみに使用すべきであるとは対照的です。 -At this time, `cache` should only be used in Server Components and the cache will be invalidated across server requests. +現時点では、`cache` はサーバコンポーネントでのみ使用すべきで、キャッシュはサーバーリクエスト間で無効化されます。 #### `memo` {/*deep-dive-memo*/} -You should use [`memo`](reference/react/memo) to prevent a component re-rendering if its props are unchanged. +[`memo`](reference/react/memo) は、props が変わらない場合にコンポーネントの再レンダーを防ぐために使用すべきです。 ```js 'use client'; @@ -396,27 +396,27 @@ function App() { } ``` -In this example, both `MemoWeatherReport` components will call `calculateAvg` when first rendered. However, if `App` re-renders, with no changes to `record`, none of the props have changed and `MemoWeatherReport` will not re-render. +この例では、両方の `MemoWeatherReport` コンポーネントは最初にレンダーされたときに `calculateAvg` を呼び出します。しかし、`App` が再レンダーされ、`record` に変更がない場合、props は変わらず、`MemoWeatherReport` は再レンダーされません。 -Compared to `useMemo`, `memo` memoizes the component render based on props vs. specific computations. Similar to `useMemo`, the memoized component only caches the last render with the last prop values. Once the props change, the cache invalidates and the component re-renders. +`useMemo` と比較して、`memo` は props に基づいてコンポーネントのレンダーをメモ化します。これは特定の計算に対してではなく、メモ化されたコンポーネントは最後のレンダーと最後の prop 値のみをキャッシュします。一度 props が変更されると、キャッシュは無効化され、コンポーネントは再レンダーされます。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### My memoized function still runs even though I've called it with the same arguments {/*memoized-function-still-runs*/} +### メモ化された関数が、同じ引数で呼び出されても実行される {/*memoized-function-still-runs*/} -See prior mentioned pitfalls -* [Calling different memoized functions will read from different caches.](#pitfall-different-memoized-functions) -* [Calling a memoized function outside of a component will not use the cache.](#pitfall-memoized-call-outside-component) +以前に述べた落とし穴を参照してください。 +* [異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取ります。](#pitfall-different-memoized-functions) +* [コンポーネントの外部でメモ化関数を呼び出すと、キャッシュは使用されません。](#pitfall-memoized-call-outside-component) -If none of the above apply, it may be a problem with how React checks if something exists in cache. +上記のいずれも該当しない場合、Reactがキャッシュに存在するかどうかをチェックする方法に問題があるかもしれません。 -If your arguments are not [primatives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference. +引数が[プリミティブ](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)でない場合（例：オブジェクト、関数、配列）、同じオブジェクト参照を渡していることを確認してください。 -When calling a memoized function, React will look up the input arguments to see if a result is already cached. React will use shallow equality of the arguments to determine if there is a cache hit. +メモ化された関数を呼び出すとき、Reactは入力引数を調べて結果がすでにキャッシュされているかどうかを確認します。Reactは引数の浅い等価性を使用してキャッシュヒットがあるかどうかを判断します。 ```js import {cache} from 'react'; @@ -441,9 +441,9 @@ function App() { } ``` -In this case the two `MapMarker`s look like they're doing the same work and calling `calculateNorm` with the same value of `{x: 10, y: 10, z:10}`. Even though the objects contain the same values, they are not the same object reference as each component creates its own `props` object. +この場合、2つの `MapMarker` は同じ処理を行い、`calculateNorm` を `{x: 10, y: 10, z:10}` の同じ値で呼び出しているように見えます。オブジェクトが同じ値を含んでいても、それぞれのコンポーネントが自身の `props` オブジェクトを作成するため、同じオブジェクト参照ではありません。 -React will call [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) on the input to verify if there is a cache hit. +Reactは入力に対して [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を呼び出し、キャッシュヒットがあるかどうかを確認します。 ```js {3,9} import {cache} from 'react'; @@ -468,9 +468,9 @@ function App() { } ``` -One way to address this could be to pass the vector dimensions to `calculateNorm`. This works because the dimensions themselves are primitives. +これを解決する一つの方法は、ベクトルの次元を `calculateNorm` に渡すことです。これは次元自体がプリミティブであるため、機能します。 -Another solution may be to pass the vector object itself as a prop to the component. We'll need to pass the same object to both component instances. +別の解決策は、ベクトルオブジェクト自体をコンポーネントのpropsとして渡すことかもしれません。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。 ```js {3,9,14} import {cache} from 'react';