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 a new addition in React 16.8. They let you use state and other React features without writing a class.
9
+
*Хуки* — це нововведення в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класів.
10
10
11
-
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:
11
+
Хуки — звичайні JavaScript функції, але ви маєте дотримуватися двох правил, використовуючи їх. Ми зробили [плагін для лінтеру](https://www.npmjs.com/package/eslint-plugin-react-hooks), щоб автоматично дотримуватися цих правил:
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Використовуйте хуки тільки на вищому рівні {#only-call-hooks-at-the-top-level}
14
14
15
-
**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).)
15
+
**Не використовуйте хуки усередині циклів, умовних операторів або вкладених функцій.**Замість цього завжди використовуйте хуки на вищому рівні React-функцій. Дотримуючись цього правила, ви будете певні, що хуки викликаються в однаковій послідовності кожного разу, коли рендериться компонент. Це дозволяє React коректно зберігати стан хуків між численними викликами `useState`та`useEffect`. (Якщо вам цікаво, то ми пояснимо це більш детально [нижче](#explanation).)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Викликайте хуки лише з React-функцій {#only-call-hooks-from-react-functions}
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
19
+
**Не викликайте хуки зі звичайних JavaScript-функцій.**Натомість, ви можете:
20
20
21
-
* ✅ Call Hooks from React function components.
22
-
* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)).
21
+
* ✅ Викликати хуки з функціонального компоненту React.
22
+
* ✅ Викликати хуки з користувацьких хуків (ми навчимося це робити [на наступній сторінці](/docs/hooks-custom.html)).
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
Дотримуючись цього правила, ви можете бути певні, що вся логіка компоненту зі станом чітко проглядається в його вихідному коді.
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:
28
+
Ми випустили плагін для ESLint [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), який примушує дотримуватися цих двох правил. Ви можете додати цей плагін до вашого проекту, якщо ви хочете його спробувати:
29
29
30
30
```bash
31
31
npm install eslint-plugin-react-hooks
32
32
```
33
33
34
34
```js
35
-
//Your ESLint configuration
35
+
//Ваша конфігурація ESLint
36
36
{
37
37
"plugins": [
38
38
// ...
39
39
"react-hooks"
40
40
],
41
41
"rules": {
42
42
// ...
43
-
"react-hooks/rules-of-hooks":"error", //Checks rules of Hooks
"react-hooks/rules-of-hooks":"error", //Перевіряє правила хуків
44
+
"react-hooks/exhaustive-deps":"warn"//Перевіряє ефект залежностей
45
45
}
46
46
}
47
47
```
48
48
49
-
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
49
+
У майбутньому ми плануємо додати цей плагін за замовчуванням до Create React App та подібних інструментів.
50
50
51
-
**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.
51
+
**Ви можете пропустити залишок сторінки та перейти до наступної, яка пояснює як писати [користувацькі хуки](/docs/hooks-custom.html).**На цій сторінці ми продовжимо і надамо пояснення необхідності цих правил.
52
52
53
-
## Explanation {#explanation}
53
+
## Пояснення {#explanation}
54
54
55
-
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:
55
+
Як ми [дізналися раніше](/docs/hooks-state.html#tip-using-multiple-state-variables), в одному компоненті можна багаторазово використовувати хуки стану або ефектів:
56
56
57
57
```js
58
58
functionForm() {
59
-
// 1. Use the name state variable
60
-
const [name, setName] =useState('Mary');
59
+
// 1. Використовуємо змінну стану name
60
+
const [name, setName] =useState('Ліна');
61
61
62
-
// 2. Use an effect for persisting the form
62
+
// 2. Використовуємо ефект для збереження стану форми
// 4. Використовуємо ефект, щоб оновити заголовок сторінки
71
71
useEffect(functionupdateTitle() {
72
72
document.title= name +''+ surname;
73
73
});
@@ -76,63 +76,63 @@ function Form() {
76
76
}
77
77
```
78
78
79
-
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:
79
+
Отже, як React дізнається який стан відповідає певному виклику`useState`? Відповідь наступна: **React покладається на послідовність викликів хуків**. Наш приклад працює тому, що послідовність викликів хуків є сталою для кожного рендеру:
80
80
81
81
```js
82
82
// ------------
83
-
//First render
83
+
//Перший рендер
84
84
// ------------
85
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
86
-
useEffect(persistForm) // 2. Add an effect for persisting the form
87
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
88
-
useEffect(updateTitle) // 4. Add an effect for updating the title
85
+
useState('Ліна') // 1. Ініціюємо змінну name зі значенням 'Ліна'
86
+
useEffect(persistForm) // 2. Додаємо ефект, щоб зберегти данні форми
87
+
useState('Костенко') // 3. Ініціюємо змінну surname зі значенням 'Костенко'
88
+
useEffect(updateTitle) // 4. Додаємо ефект, щоб оновити заголовок сторінки
89
89
90
90
// -------------
91
-
//Second render
91
+
//Другий рендер
92
92
// -------------
93
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
94
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
95
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
96
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
93
+
useState('Ліна') // 1. Зчитуємо змінну стану name (аргумент ігнорується)
94
+
useEffect(persistForm) // 2. Змінюємо ефект, щоб зберегти данні форми
95
+
useState('Костенко') // 3. Зчитуємо змінну стану surname (аргумент ігнорується)
96
+
useEffect(updateTitle) // 4. Змінюємо ефект, щоб оновити заголовок сторінки
97
97
98
98
// ...
99
99
```
100
100
101
-
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?
101
+
Доки послідовність викликів хуків залишається сталою між рендерами, React може співвідносити локальний стан між кожним з них. Але, що трапиться, якщо ми розмістимо виклик хуку (наприклад, ефект`persistForm`) всередину умовного оператору?
102
102
103
103
```js
104
-
// 🔴 We're breaking the first rule by using a Hook in a condition
104
+
// 🔴 Ми порушуємо перше правило, розміщуючи хук всередині умовного оператору
105
105
if (name !=='') {
106
106
useEffect(functionpersistForm() {
107
107
localStorage.setItem('formData', name);
108
108
});
109
109
}
110
110
```
111
111
112
-
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:
112
+
Умова`name !== ''`дорівнює `true`при першому рендері, тому цей хук буде виконано. Хай там що, та в наступному рендері користувач може очистити форму і таким чином змінити цю умову на `false`. Тепер, оскільки ми пропускаємо цей хук під час рендеру, послідовність викликів хуків стає іншою:
113
113
114
114
```js
115
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
116
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
117
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
118
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
115
+
useState('Ліна') // 1. Зчитуємо змінну стану name (аргумент ігнорується)
116
+
// useEffect(persistForm) // 🔴 Цей хук пропущено!
117
+
useState('Костенко') // 🔴 2 (але був 3). Помилка при зчитуванні змінної стану surname
118
+
useEffect(updateTitle) // 🔴 3 (but was 4). Помилка при зміні ефекту
119
119
```
120
120
121
-
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.
121
+
React не знатиме, що повернути для другого виклику хуку`useState`. React очікував, що другий виклик хуку в цьому компоненті відповідає ефекту `persistForm`так само як і під час попереднього рендеру, але це більше не так. З цього моменту кожен наступний виклик хуку після того, що ми пропустили, також зміститься на один, що призведе до помилок.
122
122
123
-
**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:
123
+
**Ось чому хуки мають викликатися на вищому рівні наших компонентів.**Якщо ми хочемо викликати ефект за певної умови, то ми можемо розмістити цю умову *всередину* нашого хуку:
124
124
125
125
```js
126
126
useEffect(functionpersistForm() {
127
-
// 👍 We're not breaking the first rule anymore
127
+
// 👍 Більше ми не порушимо перше правило
128
128
if (name !=='') {
129
129
localStorage.setItem('formData', name);
130
130
}
131
131
});
132
132
```
133
133
134
-
**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.
134
+
**Зауважте, що вам не потрібно буде піклуватися про цю проблему, якщо ви додасте до вашого проекту [запропоноване правило для лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks).**Але тепер ви знаєте, *чому* хуки працюють таким чином, та які проблеми можна запобігти використовуючи це правило.
135
135
136
-
## Next Steps {#next-steps}
136
+
## Наступні кроки {#next-steps}
137
137
138
-
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.
138
+
Нарешті ми можемо почати вчитися тому, [як писати користувацькі хуки](/docs/hooks-custom.html)! Хуки користувача дозволять вам комбінувати хуки впроваджені React з вашими власними абстракціями та повторно використовувати загальну логіку стану між різними компонентами.
0 commit comments