diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 14db9c8de..980af5ab2 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -1140,7 +1140,7 @@ button { margin-bottom: 10px; } -レンダー中に `set` 関数を呼び出す場合は、`prevCount !== count` のような条件節の中でなければならず、その条件節の中には `setPrevCount(count)` のような呼び出しが書かれなければならないことに注意してください。さもないと、再レンダーのループに陥り、コンポーネントがクラッシュします。また、例のように、*現在レンダーしている*コンポーネントの state のみ更新することができます。レンダー中に*別の*コンポーネントの `set` 関数を呼び出すとエラーになります。最後に、`set` 関数の呼び出しは、[書き換えなしで state を更新](#updating-objects-and-arrays-in-state)する必要があります。これは、[純関数](/learn/keeping-components-pure)の他のルールを破ることができないことを意味します。 +レンダー中に `set` 関数を呼び出す場合は、`prevCount !== count` のような条件文の中でなければならず、その中には `setPrevCount(count)` のような呼び出しが書かれなければならないことに注意してください。さもないと、再レンダーのループに陥り、コンポーネントがクラッシュします。また、例のように、*現在レンダーしている*コンポーネントの state のみ更新することができます。レンダー中に*別の*コンポーネントの `set` 関数を呼び出すとエラーになります。最後に、`set` 関数の呼び出しは、[書き換えなしで state を更新](#updating-objects-and-arrays-in-state)する必要があります。これは、[純関数](/learn/keeping-components-pure)の他のルールを破ることができないことを意味します。 このパターンは理解するのが難しいため、通常は避けるべきです。しかし、エフェクト内で state を更新するよりは良い方法です。レンダー中に `set` 関数を呼び出すと、コンポーネントが `return` 文で終了した直後、子コンポーネントをレンダーする前に再レンダーが行われます。このため、子コンポーネントが 2 回レンダーされずに済みます。コンポーネント関数の残りの部分は引き続き実行されます(結果は破棄されますが)。もし、`set` 関数の呼び出しを含む条件分岐が、すべてのフックの呼び出しより下にある場合、早期 `return;` を追加して、再レンダーを早めることができます。