Update hooks-rules.md

Author: Maximaximum

content/docs/hooks-rules.md

@@ -6,13 +6,13 @@ next: hooks-custom.html
 prev: hooks-effect.html
 ---
 
-*Хуки* — це нововведення в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класів.
+*Хуки* — це нововведення React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класів.
 
-Хуки — звичайні JavaScript функції, але ви маєте дотримуватися двох правил, використовуючи їх. Ми зробили [плагін для лінтеру](https://www.npmjs.com/package/eslint-plugin-react-hooks), щоб автоматично дотримуватися цих правил:
+Хуки — звичайні JavaScript-функції, але використовуючи їх, ви маєте дотримуватися двох правил. Ми зробили [плагін для лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), щоб автоматично дотримуватися цих правил:
 
-### Використовуйте хуки тільки на вищому рівні {#only-call-hooks-at-the-top-level}
+### Використовуйте хуки тільки на найвищому рівні {#only-call-hooks-at-the-top-level}
 
-**Не використовуйте хуки усередині циклів, умовних операторів або вкладених функцій.** Замість цього завжди використовуйте хуки на вищому рівні React-функцій. Дотримуючись цього правила, ви будете певні, що хуки викликаються в однаковій послідовності кожного разу, коли рендериться компонент. Це дозволяє React коректно зберігати стан хуків між численними викликами `useState` та `useEffect`. (Якщо вам цікаво, то ми пояснимо це більш детально [нижче](#explanation).)
+**Не використовуйте хуки усередині циклів, умовних операторів або вкладених функцій.** Натомість, завжди використовуйте хуки на найвищому рівні React-функцій. Дотримуючись цього правила, ви будете певні, що хуки викликаються в однаковій послідовності кожного разу, коли рендериться компонент. Це дозволяє React коректно зберігати стан хуків між численними викликами `useState` та `useEffect`. (Якщо вам цікаво, то ми пояснимо це більш детально [нижче](#explanation).)
 
 ### Викликайте хуки лише з React-функцій {#only-call-hooks-from-react-functions}
 
@@ -21,13 +21,13 @@ prev: hooks-effect.html
 * ✅ Викликати хуки з функціонального компоненту React.
 * ✅ Викликати хуки з користувацьких хуків (ми навчимося це робити [на наступній сторінці](/docs/hooks-custom.html)).
 
-Дотримуючись цього правила, ви можете бути певні, що вся логіка компоненту зі станом чітко проглядається в його вихідному коді.
+Дотримуючись цього правила, ви можете бути певні, що вся логіка компонента зі станом чітко проглядається в його джерельному коді.
 
 ## Плагін для ESLint {#eslint-plugin}
 
-Ми випустили плагін для ESLint [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), який примушує дотримуватися цих двох правил. Ви можете додати цей плагін до вашого проекту, якщо ви хочете його спробувати:
+Ми випустили плагін для ESLint [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), який примушує дотримуватися цих двох правил. Ви можете додати цей плагін до свого проекту, якщо ви хочете його спробувати:
 
-This plugin is included by default in [Create React App](/docs/create-a-new-react-app.html#create-react-app).
+Цей плагін використовується за замовчуванням у [Create React App](/docs/create-a-new-react-app.html#create-react-app).
 
 ```bash
 npm install eslint-plugin-react-hooks --save-dev
@@ -48,11 +48,11 @@ npm install eslint-plugin-react-hooks --save-dev
 }
 ```
 
-**Ви можете пропустити залишок сторінки та перейти до наступної, яка пояснює як писати [користувацькі хуки](/docs/hooks-custom.html).** На цій сторінці ми продовжимо і надамо пояснення необхідності цих правил.
+**Ви можете пропустити залишок сторінки та перейти до наступної, яка пояснює як писати [користувацькі хуки](/docs/hooks-custom.html).** На цій сторінці ми продовжимо і пояснимо необхідність цих правил.
 
 ## Пояснення {#explanation}
 
-Як ми [дізналися раніше](/docs/hooks-state.html#tip-using-multiple-state-variables), в одному компоненті можна багаторазово використовувати хуки стану або ефектів:
+Як ми [дізналися раніше](/docs/hooks-state.html#tip-using-multiple-state-variables), в одному компоненті можна використовувати декілька хуків стану або ефектів:
 
 ```js
 function Form() {
@@ -64,7 +64,7 @@ function Form() {
     localStorage.setItem('formData', name);
   });
 
-  // 3. Використовуємо змінну стану state
+  // 3. Використовуємо змінну стану surname
   const [surname, setSurname] = useState('Костенко');
 
   // 4. Використовуємо ефект, щоб оновити заголовок сторінки
@@ -76,7 +76,7 @@ function Form() {
 }
 ```
 
-Отже, як React дізнається який стан відповідає певному виклику `useState`? Відповідь наступна: **React покладається на послідовність викликів хуків**. Наш приклад працює тому, що послідовність викликів хуків є сталою для кожного рендеру:
+Отже, як React дізнається, який стан відповідає певному виклику `useState`? Відповідь наступна: **React покладається на послідовність викликів хуків**. Наш приклад працює тому, що послідовність викликів хуків є сталою для кожного рендеру:
 
 ```js
 // ------------
@@ -98,7 +98,7 @@ useEffect(updateTitle)     // 4. Змінюємо ефект, щоб онови
 // ...
 ```
 
-Доки послідовність викликів хуків залишається сталою між рендерами, React може співвідносити локальний стан між кожним з них. Але, що трапиться, якщо ми розмістимо виклик хуку (наприклад, ефект `persistForm`) всередину умовного оператору?
+Доки послідовність викликів хуків залишається сталою між рендерами, React може співвідносити локальний стан з кожним із них. Але що трапиться, якщо ми розмістимо виклик хуку (наприклад, ефект `persistForm`) всередину умовного оператору?
 
 ```js
   // 🔴 Ми порушуємо перше правило, розміщуючи хук всередині умовного оператору
@@ -118,9 +118,9 @@ useState('Костенко')        // 🔴 2 (але був 3). Помилка
 useEffect(updateTitle)     // 🔴 3 (but was 4). Помилка при зміні ефекту
 ```
 
-React не знатиме, що повернути для другого виклику хуку `useState`. React очікував, що другий виклик хуку в цьому компоненті відповідає ефекту `persistForm` так само як і під час попереднього рендеру, але це більше не так. З цього моменту кожен наступний виклик хуку після того, що ми пропустили, також зміститься на один, що призведе до помилок.
+React не знатиме, що повернути для другого виклику хуку `useState`. React очікував, що другий виклик хуку в цьому компоненті відповідає ефекту `persistForm` так само як і під час попереднього рендеру, але це більше не так. З цього моменту кожен наступний виклик хуку після того, що ми пропустили, також зміститься на одиницю, що призведе до помилок.
 
-**Ось чому хуки мають викликатися на вищому рівні наших компонентів.** Якщо ми хочемо викликати ефект за певної умови, то ми можемо розмістити цю умову *всередину* нашого хуку:
+**Ось чому хуки мають викликатися на найвищому рівні наших компонентів.** Якщо ми хочемо викликати ефект за певної умови, то ми можемо розмістити цю умову *всередині* нашого хуку:
 
 ```js
   useEffect(function persistForm() {
@@ -131,8 +131,8 @@ React не знатиме, що повернути для другого вик
   });
 ```
 
-**Зауважте, що вам не потрібно буде піклуватися про цю проблему, якщо ви додасте до вашого проекту [запропоноване правило для лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Але тепер ви знаєте, *чому* хуки працюють таким чином, та які проблеми можна запобігти використовуючи це правило.
+**Зауважте, що вам не потрібно буде піклуватися про цю проблему, якщо ви додасте до вашого проекту [запропоноване правило для лінтера](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Але тепер ви знаєте, *чому* хуки працюють таким чином, та яким проблемам можна запобігти, використовуючи це правило.
 
 ## Наступні кроки {#next-steps}
 
-Нарешті ми можемо почати вчитися тому, [як писати користувацькі хуки](/docs/hooks-custom.html)! Хуки користувача дозволять вам комбінувати хуки впроваджені React з вашими власними абстракціями та повторно використовувати загальну логіку стану між різними компонентами.
+Нарешті ми можемо почати вчитися тому, [як писати користувацькі хуки](/docs/hooks-custom.html)! Хуки користувача дозволять вам комбінувати хуки, впроваджені React, з вашими власними абстракціями, та повторно використовувати одну й ту ж логіку стану в різних компонентах.