Skip to content

Commit ea8d544

Browse files
committed
Translate set-state-in-render lint rule
1 parent 37a7f80 commit ea8d544

1 file changed

Lines changed: 13 additions & 13 deletions

File tree

‎src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ title: set-state-in-render
44

55
<Intro>
66

7-
Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops.
7+
余分なレンダーや無限レンダーループにつながる可能性のある、レンダー中の無条件な state 更新を行っていないか検証します。
88

99
</Intro>
1010

11-
## Rule Details {/*rule-details*/}
11+
## ルールの詳細 {/*rule-details*/}
1212

13-
Calling `setState` during render unconditionally triggers another render before the current one finishes. This creates an infinite loop that crashes your app.
13+
レンダー中に無条件で `setState` を呼び出すと、現在のレンダーが終わる前に新しいレンダーがトリガされます。これにより、無限ループが発生し、アプリがクラッシュします。
1414

15-
## Common Violations {/*common-violations*/}
15+
## よくある違反 {/*common-violations*/}
1616

17-
### Invalid {/*invalid*/}
17+
### 無効な例 {/*invalid*/}
1818

1919
```js {expectedErrors: {'react-compiler': [4]}}
2020
// ❌ Unconditional setState directly in render
@@ -25,7 +25,7 @@ function Component({value}) {
2525
}
2626
```
2727

28-
### Valid {/*valid*/}
28+
### 有効な例 {/*valid*/}
2929

3030
```js
3131
// ✅ Derive during render
@@ -65,11 +65,11 @@ function Component({ items }) {
6565
}
6666
```
6767
68-
## Troubleshooting {/*troubleshooting*/}
68+
## トラブルシューティング {/*troubleshooting*/}
6969
70-
### I want to sync state to a prop {/*clamp-state-to-prop*/}
70+
### state を props と同期したい {/*clamp-state-to-prop*/}
7171
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` プロパティの値を超えないようにしたいとします。
7373
7474
```js
7575
// ❌ Wrong: clamps during render
@@ -88,9 +88,9 @@ function Counter({max}) {
8888
}
8989
```
9090
91-
As soon as `count` exceeds `max`, an infinite loop is triggered.
91+
`count` が `max` を超えると、すぐに無限ループが発生します。
9292
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 を更新する時点で、上限を超えないようにできます。
9494
9595
```js
9696
// ✅ Clamp when updating
@@ -105,6 +105,6 @@ function Counter({max}) {
105105
}
106106
```
107107
108-
Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`.
108+
これで、セッタはクリックに応じてのみ実行され、React はレンダーを正常に完了し、`count` が `max` を超えることはなくなります。
109109
110-
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

Comments
 (0)