Skip to content

Translate immutability lint rule #993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smikitky wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate immutability lint rule #993

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: immutability

<Intro>

Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable).
props や state、その他の[イミュータブルな値](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)を書き換えていないか検証します。

</Intro>

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

A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
コンポーネントの props と state は、イミュータブルなスナップショットです。直接書き換えてはいけません。代わりに、新しい props を渡したり、`useState` のセッタ関数を使ったりしてください。

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

### Invalid {/*invalid*/}
### 無効な例 {/*invalid*/}

```js
// ❌ Array push mutation
Expand Down Expand Up @@ -47,7 +47,7 @@ function Component() {
}
```

### Valid {/*valid*/}
### 有効な例 {/*valid*/}

```js
// ✅ Create new array
Expand All @@ -69,11 +69,11 @@ function Component() {
}
```

## Troubleshooting {/*troubleshooting*/}
## トラブルシューティング {/*troubleshooting*/}

### I need to add items to an array {/*add-items-array*/}
### 配列に要素を追加したい {/*add-items-array*/}

Mutating arrays with methods like `push()` won't trigger re-renders:
以下のように `push()` などのメソッドで配列を書き換えても、再レンダーは起きません。

```js
// ❌ Wrong: Mutating the array
Expand All @@ -93,7 +93,7 @@ function TodoList() {
}
```

Create a new array instead:
代わりに、新しい配列を作成してください。

```js
// ✅ Better: Create a new array
Expand All @@ -113,9 +113,9 @@ function TodoList() {
}
```

### I need to update nested objects {/*update-nested-objects*/}
### ネストされたオブジェクトを更新したい {/*update-nested-objects*/}

Mutating nested properties doesn't trigger re-renders:
以下のようにネストされたプロパティを書き換えても、再レンダーは起きません。

```js
// ❌ Wrong: Mutating nested object
Expand All @@ -135,7 +135,7 @@ function UserProfile() {
}
```

Spread at each level that needs updating:
更新が必要な各階層で、スプレッド構文を使ってください。

```js
// ✅ Better: Create new objects at each level
Expand Down
Loading