Skip to content

Commit

Permalink
Merge pull request #813 from honey32/24-1217-useState-expression
Browse files Browse the repository at this point in the history
useState の "Storing information from previous renders" 節の訳の改善
  • Loading branch information
smikitky authored Dec 19, 2024
2 parents d4dc88e + f8336f5 commit 3520526
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/content/reference/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -1140,7 +1140,7 @@ button { margin-bottom: 10px; }
</Sandpack>
レンダー中に `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;` を追加して、再レンダーを早めることができます。
Expand Down

0 comments on commit 3520526

Please sign in to comment.