You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit ea8d544
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,17 @@ title: set-state-in-render
4
4
5
5
<Intro>
6
6
7
-
Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops.
7
+
余分なレンダーや無限レンダーループにつながる可能性のある、レンダー中の無条件な state 更新を行っていないか検証します。
8
8
9
9
</Intro>
10
10
11
-
## Rule Details {/*rule-details*/}
11
+
## ルールの詳細 {/*rule-details*/}
12
12
13
-
Calling`setState`during render unconditionally triggers another render before the current one finishes. This creates an infinite loop that crashes your app.
@@ -65,11 +65,11 @@ function Component({ items }) {
65
65
}
66
66
```
67
67
68
-
## Troubleshooting {/*troubleshooting*/}
68
+
## トラブルシューティング {/*troubleshooting*/}
69
69
70
-
### I want to sync state to a prop {/*clamp-state-to-prop*/}
70
+
### state を props と同期したい {/*clamp-state-to-prop*/}
71
71
72
-
A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a `max`prop:
72
+
よくある問題は、レンダーした後で state を「修正」しようとすることです。例えば、以下のようにカウンタが `max`プロパティの値を超えないようにしたいとします。
73
73
74
74
```js
75
75
// ❌ Wrong: clamps during render
@@ -88,9 +88,9 @@ function Counter({max}) {
88
88
}
89
89
```
90
90
91
-
As soon as `count`exceeds`max`, an infinite loop is triggered.
91
+
`count`が`max` を超えると、すぐに無限ループが発生します。
92
92
93
-
Instead, it's often better to move this logic to the event (the place where the state is first set). For example, you can enforce the maximum at the moment you update state:
93
+
代わりに、このロジックをイベント(最初に state を設定する場所)へ移す方が良い場合が多いです。例えば、state を更新する時点で、上限を超えないようにできます。
94
94
95
95
```js
96
96
// ✅ Clamp when updating
@@ -105,6 +105,6 @@ function Counter({max}) {
105
105
}
106
106
```
107
107
108
-
Now the setter only runs in response to the click, React finishes the render normally, and `count`never crosses `max`.
In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](https://react.dev/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
110
+
まれに、以前のレンダーの情報に基づいて state を調整する必要があるかもしれません。その場合は、条件付きで state を設定する[こちらのパターン](https://react.dev/reference/react/useState#storing-information-from-previous-renders)に従ってください。
0 commit comments