Skip to content

Translate component-hook-factories and static-components lint rules #988

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 component-hook-factories and static-components lint rules #988

Show file tree
Hide file tree
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
22 changes: 11 additions & 11 deletions src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: component-hook-factories

<Intro>

Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level.
コンポーネントやフックをネストして定義する高階関数 (higher order function) を使っていないか検証します。コンポーネントやフックは、モジュールレベルで定義するべきです。

</Intro>

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

Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
関数内でコンポーネントやフックを定義すると、呼び出しのたびに新しい関数インスタンスが作成されます。React はそれぞれをまったく別のコンポーネントとして扱うため、コンポーネントツリー全体が破棄されて再作成され、すべての state が失われ、パフォーマンスの問題が発生します。

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

Examples of incorrect code for this rule:
このルールに違反するコードの例です。

```js {expectedErrors: {'react-compiler': [14]}}
// ❌ Factory function creating components
Expand All @@ -41,9 +41,9 @@ function createCustomHook(endpoint) {
}
```

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

Examples of correct code for this rule:
このルールに従ったコードの例です。

```js
// ✅ Component defined at module level
Expand All @@ -57,11 +57,11 @@ function useData(endpoint) {
}
```

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

### I need dynamic component behavior {/*dynamic-behavior*/}
### コンポーネントの動作を動的に変えたい {/*dynamic-behavior*/}

You might think you need a factory to create customized components:
以下のように、カスタマイズしたコンポーネントを作るにはファクトリが必要だと思うかもしれません。

```js
// ❌ Wrong: Factory pattern
Expand All @@ -79,7 +79,7 @@ const RedButton = makeButton('red');
const BlueButton = makeButton('blue');
```

Pass [JSX as children](/learn/passing-props-to-a-component#passing-jsx-as-children) instead:
代わりに、[JSX を children として渡して](/learn/passing-props-to-a-component#passing-jsx-as-children)ください。

```js
// ✅ Better: Pass JSX as children
Expand Down
24 changes: 12 additions & 12 deletions src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ title: static-components

<Intro>

Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering.
コンポーネントが静的であり、レンダーのたびに再作成されていないことを検証します。動的に再作成されるコンポーネントは、state のリセットや過剰な再レンダーを引き起こす可能性があります。

</Intro>

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

Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process.
他のコンポーネント内で定義したコンポーネントは、レンダーのたびに再作成されます。React はそれぞれをまったく新しいコンポーネント型として扱うため、古いものをアンマウントし、新しいものをマウントします。その過程で、state と DOM ノードがすべて破棄されてしまいます。

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

Examples of incorrect code for this rule:
このルールに違反するコードの例です。

```js
// ❌ Component defined inside component
Expand All @@ -37,9 +37,9 @@ function Parent({type}) {
}
```

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

Examples of correct code for this rule:
このルールに従ったコードの例です。

```js
// ✅ Components at module level
Expand All @@ -55,11 +55,11 @@ function Parent({type}) {
}
```

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

### I need to render different components conditionally {/*conditional-components*/}
### 条件に応じて別のコンポーネントをレンダーしたい {/*conditional-components*/}

You might define components inside to access local state:
以下のように、ローカルの state にアクセスする目的で、コンポーネントの内側でコンポーネントを定義したいのかもしれません。

```js {expectedErrors: {'react-compiler': [13]}}
// ❌ Wrong: Inner component to access parent state
Expand All @@ -78,7 +78,7 @@ function Parent() {
}
```

Pass data as props instead:
代わりに、データを props として渡してください。

```js
// ✅ Better: Pass props to static component
Expand All @@ -98,6 +98,6 @@ function Parent() {

<Note>

If you find yourself wanting to define components inside other components to access local variables, that's a sign you should be passing props instead. This makes components more reusable and testable.
ローカル変数にアクセスするために、他のコンポーネントの内側でコンポーネントを定義したくなったら、それは代わりに props を渡すべきだというサインです。そうすることで、コンポーネントの再利用やテストが容易になります。

</Note>
Loading