From 012b9e5e1bb62494ab526469ff8ff7473c8f2605 Mon Sep 17 00:00:00 2001 From: honey32 Date: Tue, 17 Dec 2024 22:13:29 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Storing=20information=20from=20previous=20r?= =?UTF-8?q?enders=20=E7=AF=80=E3=81=AE=E8=A8=B3=E3=81=AE=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useState.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 1360e4104..14db9c8de 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;` を追加して、再レンダーを早めることができます。 From f8336f5d951286e3fcaf95798bc698d5146eb0c9 Mon Sep 17 00:00:00 2001 From: honey32 Date: Tue, 17 Dec 2024 22:30:24 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E7=AF=80=E3=81=A0?= =?UTF-8?q?=E3=81=A8=E6=B7=B7=E4=B9=B1=E3=81=99=E3=82=8B=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E5=90=8C=E3=83=9A=E3=83=BC=E3=82=B8=E5=86=85=E3=81=AE=E8=A1=A8?= =?UTF-8?q?=E7=8F=BE=E3=81=AB=E5=90=88=E3=82=8F=E3=81=9B=E3=81=A6=E6=9D=A1?= =?UTF-8?q?=E4=BB=B6=E6=96=87=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useState.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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;` を追加して、再レンダーを早めることができます。