Skip to content

Commit

Permalink
Fix useMemo translation
Browse files Browse the repository at this point in the history
  • Loading branch information
smikitky committed Oct 7, 2024
1 parent 6121416 commit 3d0d74a
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions src/content/reference/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -1058,7 +1058,7 @@ label {

### エフェクトが過度に実行されるのを抑制する {/*preventing-an-effect-from-firing-too-often*/}

[エフェクト](/learn/synchronizing-with-effects)内で何らかの値を使用したくなる場合があります
[エフェクト](/learn/synchronizing-with-effects)内で、以下のようにして何らかの値を使用したくなる場合があります

```js {4-7,10}
function ChatRoom({ roomId }) {
Expand All @@ -1075,7 +1075,7 @@ function ChatRoom({ roomId }) {
// ...
```
これにより問題が生じます。[すべてのリアクティブ値はエフェクト内で依存値として宣言する必要があります](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency)。しかしこの `options` を依存値として宣言してしまうと、エフェクトがチャットルームへの再接続を繰り返すようになってしまいます。
しかしこれにより問題が生じます。[すべてのリアクティブ値はエフェクト内で依存値として宣言する必要があります](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency)。しかしこの `options` を依存値として宣言してしまうと、エフェクトがチャットルームへの再接続を繰り返すようになってしまいます。
```js {5}
Expand All @@ -1087,7 +1087,7 @@ function ChatRoom({ roomId }) {
// ...
```
これを解決するために、エフェクト内で使用されるオブジェクトを `useMemo` でラップすることができます。
これを修正するために、エフェクト内で使用されるオブジェクトを `useMemo` でラップすることができます。
```js {4-9,16}
function ChatRoom({ roomId }) {
Expand All @@ -1109,7 +1109,7 @@ function ChatRoom({ roomId }) {
// ...
```
これにより`useMemo` がキャッシュ済みのオブジェクトを返している限り、`options` オブジェクトが再レンダー間で等しくなることが保証されます。
これで`useMemo` がキャッシュ済みのオブジェクトを返している限り、`options` オブジェクトが再レンダー間で等しくなることが保証されます。
しかし `useMemo` はパフォーマンス最適化のためのものであり、意味的な保証があるものではありません。[特定の理由](#caveats)がある場合は、React はキャッシュされた値を破棄することがあります。これによりエフェクトも再実行されるため、エフェクト*内*にオブジェクトを移動することで**このような依存値自体を不必要にする**方がより良いでしょう。
Expand All @@ -1130,7 +1130,7 @@ function ChatRoom({ roomId }) {
// ...
```
これでコードはよりシンプルになり、`useMemo` も不要となりました。[エフェクトから依存値を取り除く方法についてさらに読む](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
これでコードはよりシンプルになり、`useMemo` も不要となりました。[エフェクトから依存値を取り除く方法](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)について参照してください。
### 他のフックに渡す依存値をメモ化する {/*memoizing-a-dependency-of-another-hook*/}
Expand Down

0 comments on commit 3d0d74a

Please sign in to comment.