Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions content/docs/hooks-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function Example() {

Цей фрагмент коду базується на [прикладі лічильника з попередньої сторінки](/docs/hooks-state.html), але ми додали новий функціонал до неї: ми змінюємо заголовок документа на користувацьке повідомлення, яке містить кількість натискань.

Побічними ефектами в React є завантаження даних, оформлення підписки і зміна вручну DOM в React-компонентах. Неважливо, називаєте чи ви ці операції "побічними ефектами" (або просто "ефектами") чи ні, вам скоріше за всього доводилось використовувати їх в ваших компонентах раніше.
Побічними ефектами в React є завантаження даних, оформлення підписки і зміна вручну DOM в React-компонентах. Неважливо, називаєте ви ці операції "побічними ефектами" (або просто "ефектами") чи ні, вам скоріше за всього доводилось використовувати їх в ваших компонентах раніше.

>Порада
>
Expand Down Expand Up @@ -449,7 +449,7 @@ useEffect(() => {
}, [count]); // Ефект перезапускається тільки якщо count змінився
```

У цьому прикладі, ми передаємо `[count]` другим аргументом. Але що це взагалі означає? Це означає, що якщо `count` дорівнюватиме `5` і наш компонент повторно відрендериться з тим самим значенням `count = 5`, React порівняє `[5]` з попереднього рендеру і `[5]` з наступного рендеру. Так як, все елементи масиву залишилися без змін (`5 === 5`), React пропустить цей ефект. Це і є оптимізація даного процесу.
У цьому прикладі, ми передаємо `[count]` другим аргументом. Але що це взагалі означає? Це означає, що якщо `count` дорівнюватиме `5` і наш компонент повторно відрендериться з тим самим значенням `count = 5`, React порівняє `[5]` з попереднього рендеру і `[5]` з наступного рендеру. Так як, всі елементи масиву залишилися без змін (`5 === 5`), React пропустить цей ефект. Це і є оптимізація даного процесу.

Коли при наступному рендері наша змінна `count` оновиться до `6`, React порівняє елементи в масиві `[5]` з попереднього рендеру і елементи масиву`[6]` з наступного рендеру. Цього разу, React виконає наш ефект, так як `5 !== 6`. Якщо у вас буде кілька елементів в масиві, React виконуватиме наш ефект, в тому випадку, коли хоча б один з них буде відрізнятися.

Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ useEffect(() => {

На відміну від `componentDidMount` і `componentDidUpdate`, функція передана в `useEffect` запускається **після** розмітки та рендеру, протягом відкладеної події. Це робить хук підходящим для багатьох поширених побічних ефектів, таких як налаштування підписок та обробників подій, оскільки більшість типів роботи не повинні блокувати оновлення екрану браузером.

Проте не всі ефекти можуть бути відкладені. Наприклад, зміна DOM, що видима користувачу, має запуститись синхронно перед наступним рендером, щоб користувач не помічав візуальної невідповідності. (Ця відмінність концептально подібна до відмінності між пасивними та активними слухачами подій.) Для таких різновидів ефектів React надає додатковий хук, що зветься [`useLayoutEffect`](#uselayouteffect). Він має таку ж сигнатуру, як і `useEffect`, але відрізняється умовою запуску.
Проте не всі ефекти можуть бути відкладені. Наприклад, зміна DOM, що видима користувачу, має запуститись синхронно перед наступним рендером, щоб користувач не помічав візуальної невідповідності. (Ця відмінність концептуально подібна до відмінності між пасивними та активними слухачами подій.) Для таких різновидів ефектів React надає додатковий хук, що зветься [`useLayoutEffect`](#uselayouteffect). Він має таку ж сигнатуру, як і `useEffect`, але відрізняється умовою запуску.

Незважаючи на те, що `useEffect` відкладається допоки браузер не виконає відображення, він гарантовано спрацює перед кожним новим рендером. React завжди застосовує ефекти попереднього рендеру перед початком нового оновлення.

Expand Down