From 38d87dcc5e1251f4e0b30efa5a21c5632fc81bd0 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 6 Oct 2026 11:44:29 +0900 Subject: [PATCH] Translate component-hook-factories and static-components --- .../lints/component-hook-factories.md | 22 ++++++++--------- .../lints/static-components.md | 24 +++++++++---------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md index 537903abd..ca693166a 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md @@ -4,17 +4,17 @@ title: component-hook-factories -Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level. +コンポーネントやフックをネストして定義する高階関数 (higher order function) を使っていないか検証します。コンポーネントやフックは、モジュールレベルで定義するべきです。 -## 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 @@ -41,9 +41,9 @@ function createCustomHook(endpoint) { } ``` -### Valid {/*valid*/} +### 有効な例 {/*valid*/} -Examples of correct code for this rule: +このルールに従ったコードの例です。 ```js // ✅ Component defined at module level @@ -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 @@ -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 diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md index bd52f0703..17d619b8c 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md @@ -4,17 +4,17 @@ title: static-components -Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering. +コンポーネントが静的であり、レンダーのたびに再作成されていないことを検証します。動的に再作成されるコンポーネントは、state のリセットや過剰な再レンダーを引き起こす可能性があります。 -## 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 @@ -37,9 +37,9 @@ function Parent({type}) { } ``` -### Valid {/*valid*/} +### 有効な例 {/*valid*/} -Examples of correct code for this rule: +このルールに従ったコードの例です。 ```js // ✅ Components at module level @@ -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 @@ -78,7 +78,7 @@ function Parent() { } ``` -Pass data as props instead: +代わりに、データを props として渡してください。 ```js // ✅ Better: Pass props to static component @@ -98,6 +98,6 @@ function Parent() { -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 を渡すべきだというサインです。そうすることで、コンポーネントの再利用やテストが容易になります。 \ No newline at end of file