diff --git a/src/content/reference/react/cacheSignal.md b/src/content/reference/react/cacheSignal.md index c898ca53b..069136283 100644 --- a/src/content/reference/react/cacheSignal.md +++ b/src/content/reference/react/cacheSignal.md @@ -4,13 +4,13 @@ title: cacheSignal -`cacheSignal` is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). +`cacheSignal` は現在、[React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 -`cacheSignal` allows you to know when the `cache()` lifetime is over. +`cacheSignal` を使用すると、`cache()` のライフタイムが終了したタイミングを知ることができます。 ```js const signal = cacheSignal(); @@ -22,11 +22,11 @@ const signal = cacheSignal(); --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `cacheSignal` {/*cachesignal*/} -Call `cacheSignal` to get an `AbortSignal`. +`AbortSignal` を取得するには、`cacheSignal` を呼び出します。 ```js {3,7} import {cacheSignal} from 'react'; @@ -35,32 +35,32 @@ async function Component() { } ``` -When React has finished rendering, the `AbortSignal` will be aborted. This allows you to cancel any in-flight work that is no longer needed. -Rendering is considered finished when: -- React has successfully completed rendering -- the render was aborted -- the render has failed +React がレンダリングを完了すると、`AbortSignal` は中断されます。これにより、不要になった進行中の処理をキャンセルできます。 +レンダリングは、次のいずれかの場合に完了したとみなされます。 +- React が正常にレンダリングを完了した場合 +- レンダリングが中断された場合 +- レンダリングが失敗した場合 -#### Parameters {/*parameters*/} +#### パラメータ {/*parameters*/} -This function does not accept any parameters. +この関数はパラメータを受け取りません。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`cacheSignal` returns an `AbortSignal` if called during rendering. Otherwise `cacheSignal()` returns `null`. +`cacheSignal` は、レンダリング中に呼び出された場合、`AbortSignal` を返します。それ以外の場合、`cacheSignal()` は `null` を返します。 -#### Caveats {/*caveats*/} +#### 注意事項 {/*caveats*/} -- `cacheSignal` is currently for use in [React Server Components](/reference/rsc/server-components) only. In Client Components, it will always return `null`. In the future it will also be used for Client Component when a client cache refreshes or invalidates. You should not assume it'll always be null on the client. -- If called outside of rendering, `cacheSignal` will return `null` to make it clear that the current scope isn't cached forever. +- `cacheSignal` は現在、[React Server Components](/reference/rsc/server-components) でのみ使用できます。Client Components では常に `null` を返します。将来的には、クライアントキャッシュの更新や無効化が行われる際に Client Component でも使用される予定です。クライアントでは常に `null` になるとは想定しないでください。 +- レンダリングの外で呼び出された場合、`cacheSignal` は `null` を返します。これは、現在のスコープが永続的にキャッシュされるものではないことを明確にするためです。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -### Cancel in-flight requests {/*cancel-in-flight-requests*/} +### 進行中のリクエストをキャンセルする {/*cancel-in-flight-requests*/} -Call `cacheSignal` to abort in-flight requests. +進行中のリクエストを中断するには、`cacheSignal` を呼び出します。 ```js [[1, 4, "cacheSignal()"]] import {cache, cacheSignal} from 'react'; @@ -71,11 +71,11 @@ async function Component() { ``` -You can't use `cacheSignal` to abort async work that was started outside of rendering e.g. +レンダリングの外で開始された非同期処理は `cacheSignal` を使用して中断できません。例えば、次のようなコードです。 ```js import {cacheSignal} from 'react'; -// 🚩 Pitfall: The request will not actually be aborted if the rendering of `Component` is finished. +// 🚩 注意: `Component` のレンダリングが終了しても、このリクエストは実際には中断されません。 const response = fetch(url, { signal: cacheSignal() }); async function Component() { await response; @@ -83,9 +83,9 @@ async function Component() { ``` -### Ignore errors after React has finished rendering {/*ignore-errors-after-react-has-finished-rendering*/} +### React がレンダリングを完了した後のエラーを無視する {/*ignore-errors-after-react-has-finished-rendering*/} -If a function throws, it may be due to cancellation (e.g. the Database connection has been closed). You can use the `aborted` property to check if the error was due to cancellation or a real error. You may want to ignore errors that were due to cancellation. +関数が例外をスローした場合、その原因がキャンセルであることがあります(例えば、データベース接続 が閉じられた場合など)。`aborted` プロパティ を使用すると、そのエラーがキャンセルによるものか、本当のエラーなのかを確認できます。キャンセルが原因のエラーは、無視 したい場合があります。 ```js [[1, 2, "./database"], [2, 8, "cacheSignal()?.aborted"], [3, 12, "return null"]] import {cacheSignal} from "react"; @@ -96,7 +96,7 @@ async function getData(id) { return await queryDatabase(id); } catch (x) { if (!cacheSignal()?.aborted) { - // only log if it's a real error and not due to cancellation + // キャンセルではなく、実際のエラーの場合のみログを記録する logError(x); } return null;