From f484a2492dab3628a3490fa7bcfc315f5760763c Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 14:15:22 +0900 Subject: [PATCH] fix: Apply reviews --- src/content/reference/react/cache.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 0e88c9819..744b25d33 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -250,7 +250,7 @@ function Page({id}) { } ``` -`Page` をレンダーするとき、コンポーネントは `getUser` を呼び出しますが、返されたデータは使用しません。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。 +`Page` のレンダー時にコンポーネントは `getUser` を呼び出していますが、返されたデータを使用していないことに着目してください。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行ったり子をレンダーしたりしている間に実行される、非同期のデータベースクエリを開始します。 `Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでに完了しユーザデータをキャッシュしている場合、`Profile` が このデータを要求して待機する時点では、新たなリモートプロシージャ呼び出しを必要とせずにキャッシュから単に読み取ることができます。もし最初のデータリクエストがまだ完了していない場合でも、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 @@ -281,7 +281,7 @@ async function MyComponent() { 最初の `getData` 呼び出しでは `await` しておらず、2 回目の呼び出し では `await` していることに注目してください。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子であり、プロミスの結果を待機して返します。最初の `getData` 呼び出しは単に `fetch` を開始してプロミスをキャッシュし、2 回目の `getData` のときに見つかるようにしているのです。 -2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 +2 回目の呼び出し時点でプロミスがまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算処理を続けることができるため、2 回目の呼び出しの待ち時間を短縮できる、という最適化になります。 プロミスの最終状態がすでに決定 (settled) している場合、結果がエラーの場合でも正常終了 (fulfilled) の場合でも、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンス上の利点があります。