Skip to content

Commit 728c9e1

Browse files
committed
wip
1 parent 49be1c7 commit 728c9e1

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

src/content/reference/react/useContext.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1288,9 +1288,9 @@ export const LevelContext = createContext(0);
12881288
12891289
---
12901290
1291-
### オブジェクトと関数を渡すときの再レンダーの最適化 {/*optimizing-re-renders-when-passing-objects-and-functions*/}
1291+
### オブジェクトや関数を渡すときの再レンダーの最適化 {/*optimizing-re-renders-when-passing-objects-and-functions*/}
12921292
1293-
あなたはコンテクストを介して任意の値を渡すことができます、オブジェクトや関数を含みます
1293+
コンテクストを介して、オブジェクトや関数を含んだどんな値も渡すことができます
12941294
12951295
```js [[2, 10, "{ currentUser, login }"]]
12961296
function MyApp() {
@@ -1309,9 +1309,9 @@ function MyApp() {
13091309
}
13101310
```
13111311
1312-
ここでは、<CodeStep step={2}>context value</CodeStep> は 2 つのプロパティを持つ JavaScript オブジェクトで、そのうちの 1 つは関数です`MyApp` が再レンダーされるたびに(例えば、ルートの更新時など)、これは*異なる*オブジェクトを指し、*異なる*関数を指しますので、`useContext(AuthContext)` を呼び出すツリー内のすべてのコンポーネントも再レンダーしなければなりません
1312+
ここでは、<CodeStep step={2}>context value</CodeStep> は2 つのプロパティを持つ JavaScript のオブジェクトで、そのうちの 1 つは関数になります`MyApp` が再レンダーされる度に(例えば、ルート更新など)、これは*異なる*オブジェクトを指し、*異なる*関数を指すため、React はツリーにある `useContext(AuthContext)` を呼び出す、すべてのコンポーネントを再レンダーしなければなりません
13131313
1314-
小規模なアプリケーションでは、これは問題ではありません。しかし、基礎となるデータ、例えば `currentUser` が変更されていない場合、それらを再レンダーする必要はありません。その事実を活用するために、React がそれを活用できるように`login` 関数を [`useCallback`](/reference/react/useCallback) でラップし、オブジェクトの作成を [`useMemo`](/reference/react/useMemo) でラップすることができます。これはパフォーマンスの最適化です:
1314+
小規模なアプリでは、問題になりません。ですが、`currentUser` のような基礎となるデータが変更されていない場合、再レンダーする必要はありません。React がその事実を最大限に活用できるように`login` 関数を [`useCallback`](/reference/react/useCallback) でラップし、オブジェクトの生成を [`useMemo`](/reference/react/useMemo) にラップすることができます。これはパフォーマンスの最適化です:
13151315
13161316
```js {6,9,11,14,17}
13171317
import { useCallback, useMemo } from 'react';

0 commit comments

Comments
 (0)