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
Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to enforce these rules automatically:
**Don't call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState`and`useEffect`calls. (If you're curious, we'll explain this in depth [below](#explanation).)
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
このルールを守ることで、コンポーネント内のすべての state を使うロジックがソースコードから間違いなく参照可能になります。
25
25
26
-
## ESLint Plugin {#eslint-plugin}
26
+
## ESLint プラグイン {#eslint-plugin}
27
27
28
-
We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)that enforces these two rules. You can add this plugin to your project if you'd like to try it:
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html) now.** On this page, we'll continue by explaining the reasoning behind these rules.
As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component:
54
+
[既に学んだ通り](/docs/hooks-state.html#tip-using-multiple-state-variables)、ひとつのコンポーネント内で複数の state や副作用を使うことができます。
55
55
56
56
```js
57
57
functionForm() {
@@ -75,7 +75,7 @@ function Form() {
75
75
}
76
76
```
77
77
78
-
So how does React know which state corresponds to which `useState`call? The answer is that **React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render:
78
+
では React は、どの `useState`の呼び出しがどの state に対応するのか、どうやって知るのでしょうか？ その答えは「**React はフックが呼ばれる順番に依存している**」です。我々の例が動作するのは、フックの呼び出しの順序が毎回のレンダーごとに同じだからです。
79
79
80
80
```js
81
81
// ------------
@@ -97,7 +97,7 @@ useEffect(updateTitle) // 4. Replace the effect for updating the title
97
97
// ...
98
98
```
99
99
100
-
As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the `persistForm`effect) inside a condition?
100
+
フックへの呼び出しの順番がレンダー間で変わらなければ、React はそれらのフックにローカル state を割り当てることができます。ですがフックの呼び出しを条件分岐内（例えば `persistForm`副作用の内部で）で行ったらどうなるでしょうか？
101
101
102
102
```js
103
103
// 🔴 We're breaking the first rule by using a Hook in a condition
@@ -108,7 +108,7 @@ As long as the order of the Hook calls is the same between renders, React can as
108
108
}
109
109
```
110
110
111
-
The `name !== ''`condition is `true`on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition `false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different:
useState('Mary') // 1. Read the name state variable (argument is ignored)
@@ -117,9 +117,9 @@ useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state
117
117
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
118
118
```
119
119
120
-
React wouldn't know what to return for the second `useState`Hook call. React expected that the second Hook call in this component corresponds to the `persistForm`effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs.
**This is why Hooks must be called on the top level of our components.** If we want to run an effect conditionally, we can put that condition *inside* our Hook:
@@ -130,8 +130,8 @@ React wouldn't know what to return for the second `useState` Hook call. React ex
130
130
});
131
131
```
132
132
133
-
**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).** But now you also know *why* Hooks work this way, and which issues the rule is preventing.
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
137
+
ついに[自分独自のフックの書き方](/docs/hooks-custom.html)について学ぶ準備ができました！ カスタムフックを使えば React から提供されるフックを組み合わせて自分独自の抽象化を作り出し、複数の異なるコンポーネント間で state を使う共通のロジックを再利用することができるようになります。
0 commit comments