Skip to content

Update hooks-effect.md #214

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vldmrkl merged 1 commit into from
May 19, 2020
Merged

Update hooks-effect.md #214

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions content/docs/hooks-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ function Example() {

## Ефекти зі скиданням {#effects-with-cleanup}

Раніше ми розглядали побічні ефекти, які не вимогали скидання. Однак, є випадки, коли скидання все ж таки необхідне. Наприклад, **нам може знадобитися встановити підписку** на яке-небудь зовнішнє джерело даних. У цьому випадку дуже важливо виконувати скидання, щоб не сталося витоків пам'яті! Давайте порівняємо, як ми можемо це реалізувати за допомогою класів та хуків.
Раніше ми розглядали побічні ефекти, які не вимагали скидання. Однак, є випадки, коли скидання все ж таки необхідне. Наприклад, **нам може знадобитися встановити підписку** на яке-небудь зовнішнє джерело даних. У цьому випадку дуже важливо виконувати скидання, щоб не сталося витоків пам'яті! Давайте порівняємо, як ми можемо це реалізувати за допомогою класів та хуків.

### Приклад з використанням класів{#example-using-classes-1}

Expand Down Expand Up @@ -267,7 +267,7 @@ function FriendStatus(props) {

## Поради щодо використання ефектів {#tips-for-using-effects}

Далі, ми поглибимося у деякі особливості хуака `useEffect`, про які досвідчені користувачі React напевно вже задумалися. Будь ласка, не змушуйте себе заглиблюватися в ці особливості прямо зараз. Ви можете спершу закріпити вище пройдений матеріал і повернутися сюди пізніше в будь-який момент.
Далі, ми поглибимося у деякі особливості хуку `useEffect`, про які досвідчені користувачі React напевно вже задумалися. Будь ласка, не змушуйте себе заглиблюватися в ці особливості прямо зараз. Ви можете спершу закріпити вище пройдений матеріал і повернутися сюди пізніше в будь-який момент.

### Порада: використовуйте різні хуки для різних задач {#tip-use-multiple-effects-to-separate-concerns}

Expand Down Expand Up @@ -393,7 +393,7 @@ function FriendStatusWithCounter(props) {

Невикористання `componentDidUpdate` належним чином — це один з найпоширеніших джерел багів в React-додатках.

Тепер давайте розглянемо версію цього ж самого компонента, але вже написаного з використанням хуков:
Тепер давайте розглянемо версію цього ж самого компонента, але вже написаного з використанням хуків:

```js
function FriendStatus(props) {
Expand Down Expand Up @@ -427,7 +427,7 @@ ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // Виконує
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // Скидаємо останній ефект
```

Ця логіка за замовчуванням гарантує узгодженість виконуваних нами дій і запобігає баги, поширені в класових компонентах через упущену логіку оновлення.
Ця логіка за замовчуванням гарантує узгодженість виконуваних нами дій і запобігає багам, поширених в класових компонентах через упущену логіку оновлення.

### Порада: оптимізація продуктивності за рахунок пропуску ефектів {#tip-optimizing-performance-by-skipping-effects}

Expand Down