From f16f8d85e014b7fc62131e8074ae8e0725da4945 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 db991e585..2ba14db08 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](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components. +* `cache` は、[React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) と一緒に使用するためのものです。React Server Components をサポートする [フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) をご覧ください。 -* `cache` is only available in React’s [Canary](https://react.dev/community/versioning-policy#canary-channel) and [experimental](https://react.dev/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` は、データの取得や計算の結果をキャッシュすることができます。 ```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](https://react.dev/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` は、[Server Components](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つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。代わりに、専用のモジュールでメモ化された関数を定義し、それをコンポーネント間で [`import`-ed](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. +これは、キャッシュアクセスがコンポーネントからのみアクセス可能な [context](/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';