From 56a260dfcd3a020fd3245fa25c40994a5a12a566 Mon Sep 17 00:00:00 2001 From: Paul Ekshmidt Date: Sat, 27 Jul 2019 01:44:46 +0300 Subject: [PATCH 1/9] chore: translation of 'Using the Effect Hook' section part1 (#74) --- content/docs/hooks-effect.md | 58 ++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 142dd6756..429080aa1 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -1,14 +1,14 @@ --- id: hooks-state -title: Using the Effect Hook +title: Використовуємо хук еффекту permalink: docs/hooks-effect.html next: hooks-rules.html prev: hooks-state.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Хуки* — це новинка в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класу. -The *Effect Hook* lets you perform side effects in function components: +*Хук еффекту* дозволяє вам виконувати побічні еффекти в функціональному компоненті: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -16,42 +16,42 @@ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); - // Similar to componentDidMount and componentDidUpdate: + // Подібно до componentDidMount та componentDidUpdate: useEffect(() => { - // Update the document title using the browser API + // Оновлюємо заголовок документа, використовуючи API браузера document.title = `You clicked ${count} times`; }); return (
-

You clicked {count} times

+

Ви натиснули {count} разів

); } ``` -This snippet is based on the [counter example from the previous page](/docs/hooks-state.html), but we added a new feature to it: we set the document title to a custom message including the number of clicks. +Цей фрагмент коду базується на [прикладі лічильника з попередньої сторінки](/docs/hooks-state.html), але ми додали новий функціонал до неї: ми змінюємо заголовок документа на користувацьке повідомлення, яке містить кількість натискань. -Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you're used to calling these operations "side effects" (or just "effects"), you've likely performed them in your components before. +Побічними еффектами в React є завантаження даних, оформлення підписки і зміна вручну DOM в React-компонентах. Неважливо, називаєте чи ви ці операції "побічними еффектами" (або просто "еффектами") чи ні, вам скоріше за всього доводилось використовувати їх в ваших компонентах раніше. ->Tip +>Порада > ->If you're familiar with React class lifecycle methods, you can think of `useEffect` Hook as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined. +>Якщо ви знайомі з классовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. -There are two common kinds of side effects in React components: those that don't require cleanup, and those that do. Let's look at this distinction in more detail. +Існують два види побічних еффектів в React-компонентах: ті, які вимагають і ті, які не вимагають очистки. Давайте розглянемо обидва приклади в деталях. -## Effects Without Cleanup {#effects-without-cleanup} +## Еффекти без очистки {#effects-without-cleanup} -Sometimes, we want to **run some additional code after React has updated the DOM.** Network requests, manual DOM mutations, and logging are common examples of effects that don't require a cleanup. We say that because we can run them and immediately forget about them. Let's compare how classes and Hooks let us express such side effects. +Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами еффектів, які не вимагають очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні еффекти. -### Example Using Classes {#example-using-classes} +### Приклад з використанням класів {#example-using-classes} -In React class components, the `render` method itself shouldn't cause side effects. It would be too early -- we typically want to perform our effects *after* React has updated the DOM. +В класових React-компонентах метод `render` не може викликати побічні еффекти сам по собі. Це нам не підходить для наших цілей, оскільки ми в основному хочемо викликати наші еффект *після того*, як React оновив DOM. -This is why in React classes, we put side effects into `componentDidMount` and `componentDidUpdate`. Coming back to our example, here is a React counter class component that updates the document title right after React makes changes to the DOM: +Ось чому в класах React ми викликаємо побічні еффекти в `componentDidMount` та `componentDidUpdate` методах життєвого циклу. Повертаючись до нашого прикладу, тут показаний лічильник, який реалізований з допомогою класового React-компонента, який оновлює заголовок документа якраз пілся того, як React внесе зміни до DOM: ```js{9-15} class Example extends React.Component { @@ -63,19 +63,19 @@ class Example extends React.Component { } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ви натиснули ${this.state.count} разів`; } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ви натиснули ${this.state.count} разів`; } render() { return (
-

You clicked {this.state.count} times

+

Ви натиснули {this.state.count} разів

); @@ -83,15 +83,15 @@ class Example extends React.Component { } ``` -Note how **we have to duplicate the code between these two lifecycle methods in class.** +Зверніть увагу, що **ми продублювали код між цими двома методами життєвого циклу в класі.** -This is because in many cases we want to perform the same side effect regardless of whether the component just mounted, or if it has been updated. Conceptually, we want it to happen after every render -- but React class components don't have a method like this. We could extract a separate method but we would still have to call it in two places. +Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний еффект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні еффекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх в двох місцях. -Now let's see how we can do the same with the `useEffect` Hook. +Тепер, давайте розглянемо те, як ми можемо реалізувати це саме, використовуючи хук `useEffect`. -### Example Using Hooks {#example-using-hooks} +### Приклад з використанням хуків {#example-using-hooks} -We've already seen this example at the top of this page, but let's take a closer look at it: +Ми уже розглядали даний приклад на початку цієї сторінки, але давайте розберемо його докладніше: ```js{1,6-8} import React, { useState, useEffect } from 'react'; @@ -100,14 +100,14 @@ function Example() { const [count, setCount] = useState(0); useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `Ви натиснули ${count} разів`; }); return (
-

You clicked {count} times

+

Ви натиснули {count} разів

); From 97fea0281226617263f210cb395fec4dd5854e94 Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Fri, 26 Jul 2019 22:15:23 -0400 Subject: [PATCH 2/9] =?UTF-8?q?change=20=D0=B5=D1=84=D1=84=D0=B5=D0=BA?= =?UTF-8?q?=D1=82=D0=B0=D0=BC=D0=B8=20to=20=D0=B5=D1=84=D0=B5=D0=BA=D1=82?= =?UTF-8?q?=D0=B0=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 429080aa1..c744b4d7d 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -35,7 +35,7 @@ function Example() { Цей фрагмент коду базується на [прикладі лічильника з попередньої сторінки](/docs/hooks-state.html), але ми додали новий функціонал до неї: ми змінюємо заголовок документа на користувацьке повідомлення, яке містить кількість натискань. -Побічними еффектами в React є завантаження даних, оформлення підписки і зміна вручну DOM в React-компонентах. Неважливо, називаєте чи ви ці операції "побічними еффектами" (або просто "еффектами") чи ні, вам скоріше за всього доводилось використовувати їх в ваших компонентах раніше. +Побічними ефектами в React є завантаження даних, оформлення підписки і зміна вручну DOM в React-компонентах. Неважливо, називаєте чи ви ці операції "побічними ефектами" (або просто "ефектами") чи ні, вам скоріше за всього доводилось використовувати їх в ваших компонентах раніше. >Порада > From ce85c2bedeb858149b27f123fbc8b8a863853169 Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Fri, 26 Jul 2019 22:16:14 -0400 Subject: [PATCH 3/9] Update hooks-effect.md --- content/docs/hooks-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index c744b4d7d..5ec3438da 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -39,7 +39,7 @@ function Example() { >Порада > ->Якщо ви знайомі з классовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. +>Якщо ви знайомі з класовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. Існують два види побічних еффектів в React-компонентах: ті, які вимагають і ті, які не вимагають очистки. Давайте розглянемо обидва приклади в деталях. From c47125714f52b2dfb91d52f0a97c52d06958327b Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Fri, 26 Jul 2019 22:18:21 -0400 Subject: [PATCH 4/9] =?UTF-8?q?=D0=B2=D0=B8=D0=BC=D0=B0=D0=B3=D0=B0=D1=8E?= =?UTF-8?q?=D1=82=D1=8C=20=3D>=20=D0=BF=D0=BE=D1=82=D1=80=D0=B5=D0=B1?= =?UTF-8?q?=D1=83=D1=8E=D1=82=D1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-effect.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 5ec3438da..15cabdbd1 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -41,11 +41,11 @@ function Example() { > >Якщо ви знайомі з класовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. -Існують два види побічних еффектів в React-компонентах: ті, які вимагають і ті, які не вимагають очистки. Давайте розглянемо обидва приклади в деталях. +Існують два види побічних еффектів в React-компонентах: ті, які потребують і ті, які не потребують очистки. Давайте розглянемо обидва приклади в деталях. ## Еффекти без очистки {#effects-without-cleanup} -Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами еффектів, які не вимагають очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні еффекти. +Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами еффектів, які не потребують очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні еффекти. ### Приклад з використанням класів {#example-using-classes} From 224dbbb2b3c57df1900b369c52f3a5d970e5910a Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Sat, 10 Aug 2019 12:07:36 -0400 Subject: [PATCH 5/9] =?UTF-8?q?=D0=B5=D1=84=D1=84=D0=B5=D0=BA=D1=82=20->?= =?UTF-8?q?=20=D0=B5=D1=84=D0=B5=D0=BA=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-effect.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 15cabdbd1..872e8d286 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -1,6 +1,6 @@ --- id: hooks-state -title: Використовуємо хук еффекту +title: Використовуємо хук ефекту permalink: docs/hooks-effect.html next: hooks-rules.html prev: hooks-state.html @@ -8,7 +8,7 @@ prev: hooks-state.html *Хуки* — це новинка в React 16.8. Вони дозволяють вам використовувати стан та інші можливості React без написання класу. -*Хук еффекту* дозволяє вам виконувати побічні еффекти в функціональному компоненті: +*Хук ефекту* дозволяє вам виконувати побічні ефекти в функціональному компоненті: ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -41,17 +41,17 @@ function Example() { > >Якщо ви знайомі з класовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. -Існують два види побічних еффектів в React-компонентах: ті, які потребують і ті, які не потребують очистки. Давайте розглянемо обидва приклади в деталях. +Існують два види побічних ефектів в React-компонентах: ті, які потребують і ті, які не потребують очистки. Давайте розглянемо обидва приклади в деталях. -## Еффекти без очистки {#effects-without-cleanup} +## Ефекти без очистки {#effects-without-cleanup} -Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами еффектів, які не потребують очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні еффекти. +Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами ефектів, які не потребують очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні ефекти. ### Приклад з використанням класів {#example-using-classes} -В класових React-компонентах метод `render` не може викликати побічні еффекти сам по собі. Це нам не підходить для наших цілей, оскільки ми в основному хочемо викликати наші еффект *після того*, як React оновив DOM. +В класових React-компонентах метод `render` не може викликати побічні ефекти сам по собі. Це нам не підходить для наших цілей, оскільки ми в основному хочемо викликати наші ефект *після того*, як React оновив DOM. -Ось чому в класах React ми викликаємо побічні еффекти в `componentDidMount` та `componentDidUpdate` методах життєвого циклу. Повертаючись до нашого прикладу, тут показаний лічильник, який реалізований з допомогою класового React-компонента, який оновлює заголовок документа якраз пілся того, як React внесе зміни до DOM: +Ось чому в класах React ми викликаємо побічні ефекти в `componentDidMount` та `componentDidUpdate` методах життєвого циклу. Повертаючись до нашого прикладу, тут показаний лічильник, який реалізований з допомогою класового React-компонента, який оновлює заголовок документа якраз пілся того, як React внесе зміни до DOM: ```js{9-15} class Example extends React.Component { @@ -85,7 +85,7 @@ class Example extends React.Component { Зверніть увагу, що **ми продублювали код між цими двома методами життєвого циклу в класі.** -Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний еффект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні еффекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх в двох місцях. +Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний ефект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні ефекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх в двох місцях. Тепер, давайте розглянемо те, як ми можемо реалізувати це саме, використовуючи хук `useEffect`. From 09693557fa36d95d25a57e186893d383e458e0fa Mon Sep 17 00:00:00 2001 From: Volodymyr Date: Sat, 25 Apr 2020 01:25:26 -0400 Subject: [PATCH 6/9] wip: translate 2nd quarter of the document --- content/docs/hooks-effect.md | 82 ++++++++++++++++++------------------ 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 872e8d286..dc53cb134 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -41,11 +41,11 @@ function Example() { > >Якщо ви знайомі з класовими методами життєвого циклу React, то уявляйте хук `useEffect`, як комбінацію `componentDidMount`, `componentDidUpdate` та `componentWillUnmount`. -Існують два види побічних ефектів в React-компонентах: ті, які потребують і ті, які не потребують очистки. Давайте розглянемо обидва приклади в деталях. +Існують два види побічних ефектів в React-компонентах: ті, які потребують і ті, які не потребують скидання. Давайте розглянемо обидва приклади в деталях. -## Ефекти без очистки {#effects-without-cleanup} +## Ефекти без скидання {#effects-without-cleanup} -Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами ефектів, які не потребують очистки. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні ефекти. +Інколи ми хочемо **запустити додатковий код після того, як React оновив DOM.** Мережеві запити, ручні DOM-мутації та логування є прикладами ефектів, які не потребують скидання. Це тому, що ми їх запускаємо і після цього відразу забуваємо про них, оскільки більше ніяких додаткових дій не потрібно. Давайте порівняємо, як класи та хуки дозволяють реалізовувати такі побічні ефекти. ### Приклад з використанням класів {#example-using-classes} @@ -114,40 +114,40 @@ function Example() { } ``` -**What does `useEffect` do?** By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API. +**Що ж робить `useEffect`?** Використовуючи цей хук, ви говорите React зробить щось після рендера компонента. React запам'ятає функцію (тобто "ефект"), яку ви передали та викличе її після того, як внесе зміни в DOM. У цьому ефекті, ми встановлюємо заголовок документа, але ми також можемо виконати або викликати який-небудь імперативний API. -**Why is `useEffect` called inside a component?** Placing `useEffect` inside the component lets us access the `count` state variable (or any props) right from the effect. We don't need a special API to read it -- it's already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution. +**Чому ж ми викликаємо `useEffect` всередині компонента?** Це дає нам доступ до змінної стану `count` (або до будь-яких інших пропсів) прямо з ефекту. Нам не потрібен спеціальний API для доступу до цієї змінної -- вона вже знаходиться в області видимості функції. Хуки використовують JavaScript-замикання, і таким чином, їм не потрібен спеціальний для React API, так як JavaScript має готове рішення для цієї задачі. -**Does `useEffect` run after every render?** Yes! By default, it runs both after the first render *and* after every update. (We will later talk about [how to customize this](#tip-optimizing-performance-by-skipping-effects).) Instead of thinking in terms of "mounting" and "updating", you might find it easier to think that effects happen "after render". React guarantees the DOM has been updated by the time it runs the effects. +**Чи виконується `useEffect` після кожного рендеру?** Так! За замовчуванням він буде виконуватися після кожного рендеру *та* кожного оновлення. (Ми пізніше розглянемо, [як це налаштувати](#tip-optimizing-performance-by-skipping-effects).) Замість того, щоб сприймати це з позиції "монтування" та "оновлення", ми радимо просто мати на увазі, що ефекти виконуютьяс після кожного рендеру. React гарантує, що він запустить ефект тільки після того, як DOM оновився. -### Detailed Explanation {#detailed-explanation} +### Детальне пояснення {#detailed-explanation} -Now that we know more about effects, these lines should make sense: +Тепер, коли ми знаємо більше про принцип роботи ефектів, наступний код вже не здається таким незрозумілим: ```js function Example() { const [count, setCount] = useState(0); useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `Ви натиснули ${count} разів`; }); ``` -We declare the `count` state variable, and then we tell React we need to use an effect. We pass a function to the `useEffect` Hook. This function we pass *is* our effect. Inside our effect, we set the document title using the `document.title` browser API. We can read the latest `count` inside the effect because it's in the scope of our function. When React renders our component, it will remember the effect we used, and then run our effect after updating the DOM. This happens for every render, including the first one. +Ми оголошуємо змінну стану `count` та говоримо React, що ми хочемо використати ефект. Далі, ми передаємо функцію в хук `useEffect`. Саме ця функція і *буде* нашим ефектом. Усередині цього ефекту ми встановлюємо заголовоку документа, використовуючи API браузера `document.title`. Ми можемо отримувати доступ до актуального значення змінної `count` зсередини ефекту, так як він знаходиться в області видимості нашої функції. Коли React рендерить наш комопонент, він запам'ятовує ефект, який ми використали, і запускає його після того, як оновить DOM. Це буде відбуватися при кожному рендері в тому числі й при первісному. -Experienced JavaScript developers might notice that the function passed to `useEffect` is going to be different on every render. This is intentional. In fact, this is what lets us read the `count` value from inside the effect without worrying about it getting stale. Every time we re-render, we schedule a _different_ effect, replacing the previous one. In a way, this makes the effects behave more like a part of the render result -- each effect "belongs" to a particular render. We will see more clearly why this is useful [later on this page](#explanation-why-effects-run-on-each-update). +Досвідчені JavaScript-розробники можуть помітити, що функція, яку ми передаємо до `useEffect`, буде змінюватися при кожному рендері. Насправді, це було зроблено навмисно. Це якраз те, що дає нам змогу отримувати актуальну версію змінної `count` зсередини ефекту, не турбуючись про те, що її значення застаріє. Кожен раз при повторному рендері, ми ставимо в чергу _новий_ ефект, який замінює попередній. В певному сенсі, це включає поведінку ефектів до частини результата рендеру, тобто кожен ефект «належить» до певного рендеру. Ми розповімо про переваги цього підходу [далі на цій сторінці](#explanation-why-effects-run-on-each-update). ->Tip +>Порада > ->Unlike `componentDidMount` or `componentDidUpdate`, effects scheduled with `useEffect` don't block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don't need to happen synchronously. In the uncommon cases where they do (such as measuring the layout), there is a separate [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) Hook with an API identical to `useEffect`. +>На відміну від `componentDidMount` або `componentDidUpdate`, ефекти, запланові за допомогою `useEffect`, не блокують браузер за спроби оновити екран. Ваш додаток буде швидше реагувати на дії користувача, навіть коли ефект ще не закінчився. Більшості ефектів не потрібно працювати в синхронному режимі. В окремих випадках, коли їм все ж потрібно це робити (наприклад, вимірювання макета), існує спеціальний хук [`useLayoutEffect`](/docs/hooks-reference.html#uselayouteffect) з API ідентичним до `useEffect`. -## Effects with Cleanup {#effects-with-cleanup} +## Ефекти зі скиданням {#effects-with-cleanup} -Earlier, we looked at how to express side effects that don't require any cleanup. However, some effects do. For example, **we might want to set up a subscription** to some external data source. In that case, it is important to clean up so that we don't introduce a memory leak! Let's compare how we can do it with classes and with Hooks. +Раніше ми розглядали побічні ефекти, які не вимогали скидання. Однак, є випадки, коли скидання все ж таки необхідне. Наприклад, **нам може знадобитися встановити підписку** на яке-небудь зовнішнє джерело даних. У цьому випадку дуже важливо виконувати скидання, щоб не сталося витоків пам'яті! Давайте порівняємо, як ми можемо це реалізувати за допомогою класів та хуків. -### Example Using Classes {#example-using-classes-1} +### Приклад з використанням класів{#example-using-classes-1} -In a React class, you would typically set up a subscription in `componentDidMount`, and clean it up in `componentWillUnmount`. For example, let's say we have a `ChatAPI` module that lets us subscribe to a friend's online status. Here's how we might subscribe and display that status using a class: +у React-класі, ви, як правило, налаштували би підписку у `componentDidMount` та скинули би її у `componentWillUnmount`. Наприклад, скажімо, у нас є модуль `ChatAPI`, який дозволяє нам підписатися на статус друга в мережі. Ось як ми би підписалися та відобразили би статус, використовуючи клас: ```js{8-26} class FriendStatus extends React.Component { @@ -179,24 +179,24 @@ class FriendStatus extends React.Component { render() { if (this.state.isOnline === null) { - return 'Loading...'; + return 'Завантаження...'; } - return this.state.isOnline ? 'Online' : 'Offline'; + return this.state.isOnline ? 'Онлайн' : 'Офлайн'; } } ``` -Notice how `componentDidMount` and `componentWillUnmount` need to mirror each other. Lifecycle methods force us to split this logic even though conceptually code in both of them is related to the same effect. +Зверніть увагу, що `componentDidMount` та `componentWillUnmount` по суті містять ідентичний код. Методи життєвого циклу змушують нас розділяти цю логіку, хоча й концептуально код обох методів відноситься до одного і того ж ефекту. ->Note +>Примітка > ->Eagle-eyed readers may notice that this example also needs a `componentDidUpdate` method to be fully correct. We'll ignore this for now but will come back to it in a [later section](#explanation-why-effects-run-on-each-update) of this page. +>Уважний читач міг помітити, що для правильної роботи, нашому компоненту також потрібен `componentDidUpdate`. Ми повернемося до цього моменту [нижче](#explanation-why-effects-run-on-each-update) на цій сторінці. -### Example Using Hooks {#example-using-hooks-1} +### Приклад з використанням хуків {#example-using-hooks-1} -Let's see how we could write this component with Hooks. +Давайте розглянемо, як цей компонент буде виглядати, якщо написати його за допомогою хуків. -You might be thinking that we'd need a separate effect to perform the cleanup. But code for adding and removing a subscription is so tightly related that `useEffect` is designed to keep it together. If your effect returns a function, React will run it when it is time to clean up: +Ви можливо подумали, що нам буде потрібен окремий ефект для виконання скидання. Але коди для створення та скидання підписки тісно пов'язані, то ми вирішили об'єднати їх у `useEffect`. Якщо ваш ефект повертає функцію, React виконає її, коли настане час скинути ефект: ```js{6-16} import React, { useState, useEffect } from 'react'; @@ -210,30 +210,30 @@ function FriendStatus(props) { } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); - // Specify how to clean up after this effect: + // Зазначаємо, як скинути цей ефект: return function cleanup() { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { - return 'Loading...'; + return 'Завантаження...'; } - return isOnline ? 'Online' : 'Offline'; + return isOnline ? 'Онлайн' : 'Офлайн'; } ``` -**Why did we return a function from our effect?** This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They're part of the same effect! +**Навіщо ми повернули функцію з нашого ефекту?** Це необов'язковий механізм скидання ефектів. Кожен ефект може повернути функцію, яка скине його. Це дає нам можливість об'єднати разом логіку оформлення та скасування підписки. Вони, все-таки, частина одного й того ж ефекту! -**When exactly does React clean up an effect?** React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React *also* cleans up effects from the previous render before running the effects next time. We'll discuss [why this helps avoid bugs](#explanation-why-effects-run-on-each-update) and [how to opt out of this behavior in case it creates performance issues](#tip-optimizing-performance-by-skipping-effects) later below. +**Коли саме React буде скидати ефект?** React буде скидати ефект перед тим, як компонент розмонтується. . Однак, як ми вже знаємо, ефекти виконуються не один раз, а при кожному рендері. Ось чому React *також* скидає ефект з попереднього рендеру, перед тим, як запустити наступний. Ми розглянемо [чому це дозволяє уникнути багів](#explanation-why-effects-run-on-each-update) і [як відмовитися від цієї логіки, якщо це викликає проблеми з продуктивністю](#tip-optimizing-performance-by-skipping-effects) далі. ->Note +>Примітка > ->We don't have to return a named function from the effect. We called it `cleanup` here to clarify its purpose, but you could return an arrow function or call it something different. +>Нам не потрібно повертати іменовану функцію з ефекту. Ми назвали її `cleanup`, щоб пояснити її призначення. Ви можете за бажанням повернути стрілкову функцію або назвати її якось інакше. -## Recap {#recap} +## Підсумок {#recap} -We've learned that `useEffect` lets us express different kinds of side effects after a component renders. Some effects might require cleanup so they return a function: +Ми дізналися, що за допомогою `useEffect`, ми можемо викликати різні побічні ефекти після того, як компонент відрендериться. Деякі ефекти потребують скидання, тому вони повертають відповідну функцію: ```js useEffect(() => { @@ -248,19 +248,19 @@ We've learned that `useEffect` lets us express different kinds of side effects a }); ``` -Other effects might not have a cleanup phase, and don't return anything. +У деяких ефектах немає етапу скидання, тому вони не повертають нічого. ```js useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `Ви натиснули ${count} разів`; }); ``` -The Effect Hook unifies both use cases with a single API. +Хук ефекту покриває обидва сценарії єдиним API. ------------- -**If you feel like you have a decent grasp on how the Effect Hook works, or if you feel overwhelmed, you can jump to the [next page about Rules of Hooks](/docs/hooks-rules.html) now.** +**Якщо ви відчуваєте, що ви достатньо розібралися з тим, як працює хук ефекту, ви можете відправитися на [сторінку про правила хуків](/docs/hooks-rules.html) прямо зараз.** ------------- @@ -281,7 +281,7 @@ class FriendStatusWithCounter extends React.Component { } componentDidMount() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ви натиснули ${this.state.count} разів`; ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange @@ -289,7 +289,7 @@ class FriendStatusWithCounter extends React.Component { } componentDidUpdate() { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ви натиснули ${this.state.count} разів`; } componentWillUnmount() { @@ -315,7 +315,7 @@ So, how can Hooks solve this problem? Just like [you can use the *State* Hook mo function FriendStatusWithCounter(props) { const [count, setCount] = useState(0); useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `Ви натиснули ${count} разів`; }); const [isOnline, setIsOnline] = useState(null); From 56907aaae3ffb4f33a4833e790000c6b0fb9d3a7 Mon Sep 17 00:00:00 2001 From: Volodymyr Date: Sat, 25 Apr 2020 13:49:56 -0400 Subject: [PATCH 7/9] wip: translate the remaining part --- content/docs/hooks-effect.md | 98 ++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index dc53cb134..216e389a9 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -264,13 +264,13 @@ function FriendStatus(props) { ------------- -## Tips for Using Effects {#tips-for-using-effects} +## Поради щодо використання ефектів {#tips-for-using-effects} -We'll continue this page with an in-depth look at some aspects of `useEffect` that experienced React users will likely be curious about. Don't feel obligated to dig into them now. You can always come back to this page to learn more details about the Effect Hook. +Далі, ми поглибимося у деякі особливості хуака `useEffect`, про які досвідчені користувачі React напевно вже задумалися. Будь ласка, не змушуйте себе заглиблюватися в ці особливості прямо зараз. Ви можете спершу закріпити вище пройдений матеріал і повернутися сюди пізніше в будь-який момент. -### Tip: Use Multiple Effects to Separate Concerns {#tip-use-multiple-effects-to-separate-concerns} +### Порада: використовуйте різні хуки для різних задач {#tip-use-multiple-effects-to-separate-concerns} -One of the problems we outlined in the [Motivation](/docs/hooks-intro.html#complex-components-become-hard-to-understand) for Hooks is that class lifecycle methods often contain unrelated logic, but related logic gets broken up into several methods. Here is a component that combines the counter and the friend status indicator logic from the previous examples: +Одна з ключових проблем, яку ми описали у [мотивації](/docs/hooks-intro.html#complex-components-become-hard-to-understand), наводить аргументи про те, що на відміну від хуків, класові методи життєвого циклу часто містять логіку, яка ніяк між собою не пов'язана, в той час як пов'язана логіка, розбивається на декілька методів. Далі ми наведемо приклад компонента, який об'єднує в собі логіку лічильника та індикатора статусу нашого друга з попередніх прикладів: ```js class FriendStatusWithCounter extends React.Component { @@ -307,9 +307,9 @@ class FriendStatusWithCounter extends React.Component { // ... ``` -Note how the logic that sets `document.title` is split between `componentDidMount` and `componentDidUpdate`. The subscription logic is also spread between `componentDidMount` and `componentWillUnmount`. And `componentDidMount` contains code for both tasks. +Зверніть увагу, що логіка, яка встановлює `document.title` розділена між `componentDidMount` та `componentDidUpdate`. Логіка підписки також розкидана між `componentDidMount` та `componentWillUnmount`. А метод `componentDidMount` містить в собі логіку для обох задач. -So, how can Hooks solve this problem? Just like [you can use the *State* Hook more than once](/docs/hooks-state.html#tip-using-multiple-state-variables), you can also use several effects. This lets us separate unrelated logic into different effects: +Отже, як можна вирішити цю проблему за допомогою хуків? Так само як [ви можете використовувати хук стану більш ніж один раз](/docs/hooks-state.html#tip-using-multiple-state-variables), ви також можете використати декілька ефектів. Це дає нам можливість розділяти різну незв'язану між собою логіку між різними ефектами: ```js{3,8} function FriendStatusWithCounter(props) { @@ -333,13 +333,13 @@ function FriendStatusWithCounter(props) { } ``` -**Hooks let us split the code based on what it is doing** rather than a lifecycle method name. React will apply *every* effect used by the component, in the order they were specified. +**За допомогою хуків, ми можемо розділити наш код виходячи з того, що він робить**, а не за принципами методів життєвого циклу. React буде виконувати *кожен* використаний ефект у компоненті, згідно з порядком їх оголошення. -### Explanation: Why Effects Run on Each Update {#explanation-why-effects-run-on-each-update} +### Пояснення: чому ефекти виконуються при кожному оновленні {#explanation-why-effects-run-on-each-update} -If you're used to classes, you might be wondering why the effect cleanup phase happens after every re-render, and not just once during unmounting. Let's look at a practical example to see why this design helps us create components with fewer bugs. +Якщо ви звикли користуватися класами, вам може бути не дуже зрозуміло, чому етап скидання ефекту відбувається після кожного наступного рендеру, а не один лише раз під час розмонтування. Давайте розглянемо на практиці, чому такий підхід допомагає створювати компоненти з меншою кількістю багів. -[Earlier on this page](#example-using-classes-1), we introduced an example `FriendStatus` component that displays whether a friend is online or not. Our class reads `friend.id` from `this.props`, subscribes to the friend status after the component mounts, and unsubscribes during unmounting: +[Раніше на цій сторінці](#example-using-classes-1), ми розглядали приклад з компонентом `FriendStatus`, який відображає в мережі наш друг чи ні. Наш клас бере `friend.id` з `this.props`, підписується на статус друга після того, як компонент змонтувався, і відписується під час розмонтування: ```js componentDidMount() { @@ -357,9 +357,9 @@ If you're used to classes, you might be wondering why the effect cleanup phase h } ``` -**But what happens if the `friend` prop changes** while the component is on the screen? Our component would continue displaying the online status of a different friend. This is a bug. We would also cause a memory leak or crash when unmounting since the unsubscribe call would use the wrong friend ID. +**Але що ж станеться, якщо проп `friend` зміниться**, поки компонент все ще знаходиться на екрані? Наш компонент буде відображати статус в мережі вже якогось іншого друга. Це якраз і є баг. Це також може привести до витоку пам'яті або взагалі до вильоту нашого додатку при розмонтуванні, так як метод відписки буде використовувати неправильний ID друга, від якого ми хочемо відписатися. -In a class component, we would need to add `componentDidUpdate` to handle this case: +У класовому компоненті нам би довелося додати `componentDidUpdate`, щоб вирішити цю задачу: ```js{8-19} componentDidMount() { @@ -370,12 +370,12 @@ In a class component, we would need to add `componentDidUpdate` to handle this c } componentDidUpdate(prevProps) { - // Unsubscribe from the previous friend.id + // Відписка від попереднього friend.id ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange ); - // Subscribe to the next friend.id + // Підписка на наступний friend.id ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange @@ -390,9 +390,9 @@ In a class component, we would need to add `componentDidUpdate` to handle this c } ``` -Forgetting to handle `componentDidUpdate` properly is a common source of bugs in React applications. +Невикористання `componentDidUpdate` належним чином — це один з найпоширеніших джерел багів в React-додатках. -Now consider the version of this component that uses Hooks: +Тепер давайте розглянемо версію цього ж самого компонента, але вже написаного з використанням хуков: ```js function FriendStatus(props) { @@ -406,53 +406,53 @@ function FriendStatus(props) { }); ``` -It doesn't suffer from this bug. (But we also didn't make any changes to it.) +Цього бага в даному компоненті немає. (Але ми і не змінили там нічого) -There is no special code for handling updates because `useEffect` handles them *by default*. It cleans up the previous effects before applying the next effects. To illustrate this, here is a sequence of subscribe and unsubscribe calls that this component could produce over time: +Тут немає ніякого особливого коду для вирішення проблем з оновленнями, так як `useEffect` вирішує їх *за замовчуванням*. Він скидає попередні ефекти перш ніж виконати нові. Щоб показати це на практиці, давайте розглянемо послідовність підписок і відписок, які цей компонент може виконати протягом деякого часу. ```js -// Mount with { friend: { id: 100 } } props -ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // Run first effect +// Монтуємо з пропсами { friend: { id: 100 } } +ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // Виконуємо перший ефект -// Update with { friend: { id: 200 } } props -ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // Clean up previous effect -ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // Run next effect +// Оновлюємо з пропсами { friend: { id: 200 } } +ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // Скидаємо попередній ефект +ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // Виконуємо наступний ефект -// Update with { friend: { id: 300 } } props -ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // Clean up previous effect -ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Run next effect +// Оновлюємо з пропсами { friend: { id: 300 } } +ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // Скидаємо попередній ефект +ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Виконуємо наступний ефект -// Unmount -ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Clean up last effect +// Розмонтуємо +ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Скидаємо останній ефект ``` -This behavior ensures consistency by default and prevents bugs that are common in class components due to missing update logic. +Ця логіка за замовчуванням гарантує узгодженість виконуваних нами дій і запобігає баги, поширені в класових компонентах через упущену логіку оновлення. -### Tip: Optimizing Performance by Skipping Effects {#tip-optimizing-performance-by-skipping-effects} +### Порада: оптимізація продуктивності за рахунок пропуску ефектів {#tip-optimizing-performance-by-skipping-effects} -In some cases, cleaning up or applying the effect after every render might create a performance problem. In class components, we can solve this by writing an extra comparison with `prevProps` or `prevState` inside `componentDidUpdate`: +У деяких випадках скидання або виконання ефекту при кожному рендері може спричинити проблеми з продуктивністю. У класових компонентах, ми можемо вирішити це використовуючи додаткове порівняння `prevProps` або `prevState` всередині `componentDidUpdate`: ```js componentDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { - document.title = `You clicked ${this.state.count} times`; + document.title = `Ви натиснули ${this.state.count} разів`; } } ``` -This requirement is common enough that it is built into the `useEffect` Hook API. You can tell React to *skip* applying an effect if certain values haven't changed between re-renders. To do so, pass an array as an optional second argument to `useEffect`: +Цю логіку доводиться використовувати досить часто, тому ми вирішили вбудувати її в API хука `useEffect`. Ви можете зробити так, щоб React *пропускав* виклик ефекту, якщо певні значення залишилися без змін між наступними рендерами. Щоб зробити це, передайте масив в `useEffect` другим необов'язковим аргументом: ```js{3} useEffect(() => { - document.title = `You clicked ${count} times`; -}, [count]); // Only re-run the effect if count changes + document.title = `Ви натиснули ${count} разів`; +}, [count]); // Ефект перезапускається тільки якщо count змінився ``` -In the example above, we pass `[count]` as the second argument. What does this mean? If the `count` is `5`, and then our component re-renders with `count` still equal to `5`, React will compare `[5]` from the previous render and `[5]` from the next render. Because all items in the array are the same (`5 === 5`), React would skip the effect. That's our optimization. +У цьому прикладі, ми передаємо `[count]` другим аргументом. Але що це взагалі означає? Це означає, що якщо `count` дорівнюватиме `5` і наш компонент повторно відрендериться з тим самим значенням `count = 5`, React порівняє `[5]` з попереднього рендеру і `[5]` з наступного рендеру. Так як, все елементи масиву залишилися без змін (`5 === 5`), React пропустить цей ефект. Це і є оптимізація даного процесу. -When we render with `count` updated to `6`, React will compare the items in the `[5]` array from the previous render to items in the `[6]` array from the next render. This time, React will re-apply the effect because `5 !== 6`. If there are multiple items in the array, React will re-run the effect even if just one of them is different. +Коли при наступному рендері наша змінна `count` оновиться до `6`, React порівняє елементи в масиві `[5]` з попереднього рендеру і елементи масиву`[6]` з наступного рендеру. Цього разу, React виконає наш ефект, так як `5 !== 6`. Якщо у вас буде кілька елементів в масиві, React виконуватиме наш ефект, в тому випадку, коли хоча б один з них буде відрізнятися. -This also works for effects that have a cleanup phase: +Це також працює для ефектів з етапом скидання: ```js{10} useEffect(() => { @@ -464,25 +464,25 @@ useEffect(() => { return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; -}, [props.friend.id]); // Only re-subscribe if props.friend.id changes +}, [props.friend.id]); // Повторно підписатися, тільки якщо props.friend.id змінився ``` -In the future, the second argument might get added automatically by a build-time transformation. +У майбутньому, другий аргумент можливо буде додаватися автоматично за допомогою трансформації під час виконання. ->Note +>Примітка > ->If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and [what to do when the array changes too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). +>Якщо ви хочете використати цю оптимізацію, зверніть увагу на те, щоб масив включав в себе **усі значення з області видимості компонента (такі як пропси і стан), які можуть змінюватися з плином часу, і які будуть використовуватися ефектом**. В іншому випадку, ваш код буде посилатися на застаріле значення з попередніх рендерів. Дізнайтеся більше про те, [як діяти з функціями](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) і [що робити з часто змінюваними масивами](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often). > ->If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works. +>Якщо ви хочете запустити ефект і скинути його тільки один раз (при монтуванні і розмонтуванні), ви можете передати порожній масив (`[]`) другим аргументом. React вважатиме, що ваш ефект не залежить від *будь-яких* значень з пропсов або стану і тому не буде виконувати повторних рендерів. Це не обробляється як особливий випадок -- він безпосередньо випливає з логіки роботи масивів залежностей. > ->If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem. +>Якщо ви передасте порожній масив (`[]`), пропси і стан всередині ефекту завжди матимуть значення, присвоєні їм спочатку. Хоча передача `[]` другим аргументом ближче за моделлю мислення до знайомих `componentDidMount` та `componentWillUnmount`, зазвичай є [кращі](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [способи](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) уникнути частих повторних рендерів. Не забувайте, що React відкладає виконання `useEffect`, поки браузер не відмалює усі зміни, тому виконання додаткової роботи не є суттєвою проблемою. > ->We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix. +>Ми радимо використовувати правило [`exhaustive-deps`](https://github.com/facebook/react/issues/14920), що входить в наш пакет правил лінтера [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation). Воно попереджає, коли залежності описані неправильно і пропонує виправлення. -## Next Steps {#next-steps} +## Наступні кроки {#next-steps} -Congratulations! This was a long page, but hopefully by the end most of your questions about effects were answered. You've learned both the State Hook and the Effect Hook, and there is a *lot* you can do with both of them combined. They cover most of the use cases for classes -- and where they don't, you might find the [additional Hooks](/docs/hooks-reference.html) helpful. +Вітаємо! Це була довга сторінка, але ми сподіваємося, що під кінець, у нас вийшло відповісти на всі ваші запитання з приводу роботи ефектів. Ви вже дізналися про хук стану і про хук ефекту, і тепер є *дуже багато* речей, які ви можете робити, об'єднавши їх разом. Вони охоплюють більшість випадків для використання класів. В інших випадках, вам можуть стати в нагоді [додаткові хукі](/docs/hooks-reference.html). -We're also starting to see how Hooks solve problems outlined in [Motivation](/docs/hooks-intro.html#motivation). We've seen how effect cleanup avoids duplication in `componentDidUpdate` and `componentWillUnmount`, brings related code closer together, and helps us avoid bugs. We've also seen how we can separate effects by their purpose, which is something we couldn't do in classes at all. +Ми також дізналися, як хукі позбавляють від проблем описаних у [мотивації](/docs/hooks-intro.html#motivation). Ми побачили, як за допомогою скидання ефектів нам вдається уникнути повторення коду в `componentDidUpdate` і `componentWillUnmount`, об'єднати пов'язаний код разом і захистити наш код від багів. Ми також розглянули, як можна розділяти наші ефекти за змістом і призначенням, що раніше було неможливо в класах. -At this point you might be questioning how Hooks work. How can React know which `useState` call corresponds to which state variable between re-renders? How does React "match up" previous and next effects on every update? **On the next page we will learn about the [Rules of Hooks](/docs/hooks-rules.html) -- they're essential to making Hooks work.** +На цьому етапі, ви, можливо, ставите питанням, як хукі працюють в цілому. Як React розуміє, яка змінна стану відповідає якому виклику `useState` між повторними рендерами? Як React «зіставляє» попередні і наступні ефекти при кожному оновленні? **На наступній сторінці, ми дізнаємося про [правила хуків](/docs/hooks-rules.html), так як вони є запорукою належного функціонування хуків.** From e475708dd2bc47fec9456d0351b3c8b8f0f210db Mon Sep 17 00:00:00 2001 From: Volodymyr Klymenko Date: Sun, 26 Apr 2020 14:09:10 -0400 Subject: [PATCH 8/9] Update content/docs/hooks-effect.md Co-Authored-By: Oleksii Polovyi --- content/docs/hooks-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index 216e389a9..cf604d645 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -85,7 +85,7 @@ class Example extends React.Component { Зверніть увагу, що **ми продублювали код між цими двома методами життєвого циклу в класі.** -Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний ефект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні ефекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх в двох місцях. +Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний ефект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні ефекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх у двох місцях. Тепер, давайте розглянемо те, як ми можемо реалізувати це саме, використовуючи хук `useEffect`. From 033de10e9907b715898bbc9b839ae36b6d25a48b Mon Sep 17 00:00:00 2001 From: Volodymyr Klymenko Date: Sun, 26 Apr 2020 14:09:30 -0400 Subject: [PATCH 9/9] Update content/docs/hooks-effect.md Co-Authored-By: Oleksii Polovyi --- content/docs/hooks-effect.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-effect.md b/content/docs/hooks-effect.md index cf604d645..f67840433 100644 --- a/content/docs/hooks-effect.md +++ b/content/docs/hooks-effect.md @@ -87,7 +87,7 @@ class Example extends React.Component { Це все тому, що в багатьох випадках ми хочемо виконати той самий побічний ефект незалжно від того чи компонент тільки змонтувався, або він оновився. Ми б хотіли, щоб ці побічні ефекти викликались після кожного рендеру, але класові React-компоненти не мають методу, який це може зробити. Ми б могли винести окремий метод, але нам все рівно би потрібно було викликати їх у двох місцях. -Тепер, давайте розглянемо те, як ми можемо реалізувати це саме, використовуючи хук `useEffect`. +Тепер, давайте розглянемо те, як ми можемо реалізувати теж саме, використовуючи хук `useEffect`. ### Приклад з використанням хуків {#example-using-hooks}