hooks-rules: various improvements

Author: lex111

content/docs/hooks-rules.md

@@ -6,26 +6,26 @@ 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}
 
-**Не используйте хуки внутри циклов, условных операторов или вложенных функций** Вместо этого всегда используйте хуки только на верхнем уровне React-функций. Cледуя этому правилу, можно гарантировать, что каждый раз, когда производится рендеринг компонента хуки вызываются в той же последовательности. А это то, что позволяет React правильно сохранять состояние хуков между множественными вызовами `useState` и `useEffect`. (Если вам интересно, подробное объяснение [ниже](#explanation).)
+**Не используйте хуки внутри циклов, условных операторов или вложенных функций** Вместо этого всегда используйте хуки только на верхнем уровне React-функций. Исполнение этого правила гарантирует, что хуки вызываются в одинаковой последовательности при каждом рендере компонента. Это позволит React правильно сохранять состояние хуков между множественными вызовами `useState` и `useEffect`. (Если вам интересно, подробное объяснение [ниже](#explanation).)
 
 ### Вызывайте хуки только из React-функций {#only-call-hooks-from-react-functions}
 
 **Не вызывайте хуки из обычных функций JavaScript.** Вместо этого можно:
 
-* ✅ Вызвать хуки из функционального компонента React.
-* ✅ Вызвать хуки из пользовательского хука (мы научимся делать это [на следующей странице](/docs/hooks-custom.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), который принуждает к соблюдению этих двух правил. Если хотите испытать его в деле, добавьте этот плагин в ваш проект.
 
 ```bash
 npm install eslint-plugin-react-hooks
@@ -47,7 +47,7 @@ npm install eslint-plugin-react-hooks
 
 В будущем мы намереваемся включать этот плагин в Create React App и подобные инструменты по умолчанию.
 
-**Теперь вы можете перейти на следующую страницу, рассказывающую как создать [собственный хук](/docs/hooks-custom.html).** А далее на этой странице мы объясним, зачем необходимы данные правила.
+**Вы можете пропустить остаток этой страницы и перейти к созданию [собственного хука](/docs/hooks-custom.html).** Но если вам интересно, ниже приведено объяснение, почему правила хуков необходимы.
 
 ## Объяснение {#explanation}
 
@@ -75,29 +75,29 @@ function Form() {
 }
 ```
 
-Итак, как же React сопоставляет состояние вызову `useState`? Ответ следующий: **React полагается на порядок вызова хуков**. Наш пример работает, потому что порядок вызова хуков сохраняется при каждом рендеринге.
+Итак, как же React сопоставляет переменные состояния с вызовами `useState`? Ответ таков: **React полагается на порядок вызова хуков**. Наш пример работает, потому что порядок вызова хуков одинаков при каждом рендере.
 
 ```js
 // ------------
-// Первый рендеринг
+// Первый рендер
 // ------------
-useState('Mary')           // 1. Инициализируем переменную name значением 'Mary'
+useState('Мэри')           // 1. Инициализируем переменную name значением 'Mary'
 useEffect(persistForm)     // 2. Добавляем эффект для сохранения данных формы
-useState('Poppins')        // 3. Инициализируем переменную surname значением 'Poppins'
+useState('Поппинс')        // 3. Инициализируем переменную surname значением 'Poppins'
 useEffect(updateTitle)     // 4. Добавляем эффект для обновления заголовка страницы
 
 // -------------
-// Второй рендеринг
+// Второй рендер
 // -------------
-useState('Mary')           // 1. Читаем переменную состояния name (аргумент игнорируется)
+useState('Мэри')           // 1. Читаем переменную состояния name (аргумент игнорируется)
 useEffect(persistForm)     // 2. Заменяем эффект сохранения данных формы
-useState('Poppins')        // 3. Читаем переменную состояния surname (аргумент игнорируется)
+useState('Поппинс')        // 3. Читаем переменную состояния surname (аргумент игнорируется)
 useEffect(updateTitle)     // 4. Заменяем эффект обновления заголовка страницы
 
 // ...
 ```
 
-До тех пор пока порядок вызова хуков сохраняется между каждым рендерингом, React может сопоставить некое внутреннее состояние с каждым из них. Но что случится, если мы поместим вызов хука (например, эффект `persistForm`) внутрь условного оператора?
+До тех пор пока порядок вызова хуков одинаков в каждом рендере, React может сопоставить некое внутреннее состояние с каждым из них. Но что случится, если мы поместим вызов хука (например, эффект `persistForm`) внутрь условного оператора?
 
 ```js
   // 🔴 Нарушаем первое правило, помещая хук в условие
@@ -108,7 +108,7 @@ useEffect(updateTitle)     // 4. Заменяем эффект обновлен
   }
 ```
 
-Условие `name !== ''` равняется `true` при первом рендеринге, поэтому хук выполняется. Тем не менее, при следующем рендеринге пользователь может обратить это условие в `false`, очистив поля формы. Теперь во время рендеринга хук будет пропущен и порядок вызовов хуков изменится.
+Условие `name !== ''` равняется `true` при первом рендере, поэтому хук выполняется. Тем не менее, при следующем рендере пользователь может обратить это условие в `false`, очистив поля формы. Теперь во время рендера хук будет пропущен и порядок вызовов хуков изменится.
 
 ```js
 useState('Mary')           // 1. Читаем переменную состояния name (аргумент игнорируется)
@@ -117,7 +117,7 @@ useState('Poppins')        // 🔴 2 (но ранее был 3). Ошибка п
 useEffect(updateTitle)     // 🔴 3 (но ранее был 4). Ошибка при замене эффекта
 ```
 
-React не будет знать, что вернуть для второго вызова хука `useState`. React ожидал, что второй вызов хука в этом компоненте соответствует эффекту `persistForm`, так же как при предыдущем рендеринге, но это больше не так. Начиная с этого момента каждый последующий вызов хука после того который был пропущен, также будет сдвинут на один назад, что приведет к ошибкам.
+React не будет знать, что вернуть для второго вызова хука `useState`. React ожидал, что второй вызов хука в этом компоненте соответствует эффекту `persistForm`, так же как при предыдущем рендере, но это больше не так. Начиная с этого момента, вызов каждого хука, следующего за пропущенным, также будет сдвинут на один назад, что приведёт к ошибкам.
 
 **Вот почему хуки должны вызываться на верхнем уровне компонента.** Если мы хотим запускать эффект по условию, то можем поместить это условие *внутрь* хука:
 
@@ -130,8 +130,8 @@ React не будет знать, что вернуть для второго в
   });
 ```
 
-**Но эта проблема не будет вас беспокоить, если вы включите в свой проект [наше правило линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Но теперь вы знаете, *почему* хуки работают таким образом и какие проблемы это правило предотвращает.
+**Эта проблема не будет вас беспокоить, если вы включите в свой проект [наше правило линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Но теперь вы знаете, *почему* хуки работают таким образом и какие проблемы это правило предотвращает.
 
-## Далее {#next-steps}
+## Следующие шаги {#next-steps}
 
-Наконец-то мы готовы изучить как [написать свой собственный хук](/docs/hooks-custom.html)! Пользовательские хуки позволят вам включить собственные хуки React в ваши  абстракции и повторно использовать общую логику состояния в различных компонентах. 
+Наконец-то мы готовы изучить как [написать свой собственный хук](/docs/hooks-custom.html)! Пользовательские хуки позволят вам включить собственные хуки React в ваши абстракции и повторно использовать общую логику состояния в различных компонентах.