Виправлено прикладки

Author: Andrii256

src/content/reference/react/useEffect.md

@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
 
 #### Параметри {/*parameters*/}
 
-* `setup` (з англ. встановлюючий): Функція з логікою вашого ефекту. Ваша функція `setup` може додатково повертати *cleanup* функцію (з англ. cleanup - прибирання). Після того, як ваш компонент буде додано в DOM, React виконає функцію `setup`. Потім після кожного наступного рендеру React буде перевіряти чи змінилось значення хоча б однієї із залежностей, і якщо значення хоча б однієї залежності змінилось, то React спочатку виконає *cleanup*-функцію (якщо ви її надали) зі старими значеннями, а потім знову виконає `setup` функцію із новими значеннями. Після видалення компонента з DOM React виконає *cleanup*-функцію.
+* `setup` (з англ. встановлюючий): Функція з логікою вашого ефекту. Ваша функція `setup` може додатково повертати *cleanup*-функцію (з англ. cleanup - прибирання). Після того, як ваш компонент буде додано в DOM, React виконає функцію `setup`. Потім після кожного наступного рендеру React буде перевіряти чи змінилось значення хоча б однієї із залежностей, і якщо значення хоча б однієї залежності змінилось, то React спочатку виконає *cleanup*-функцію (якщо ви її надали) зі старими значеннями, а потім знову виконає `setup`-функцію із новими значеннями. Після видалення компонента з DOM React виконає *cleanup*-функцію.
 
 * **необов'язковий** `dependencies` (з англ. залежності): Список реактивних значень, від яких залежить код всередині `setup`-функції. Під реактивними значеннями мається на увазі `props`, `state`, а також усі змінні та функції, оголошені безпосередньо в тілі вашого компонента. Якщо ваш лінтер [налаштовано для React](/learn/editor-setup#linting), він буде контролювати, що ви не забули додати до списку жодне з необхідних реактивних значень. Список залежностей має містити фіксовану кількість елементів і бути поданий підряд, наприклад `[dep1, dep2, dep3]`. React порівнюватиме кожну залежність із її попереднім значенням, використовуючи порівняння [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Якщо ви не передасте масив залежностей, то ваш Effect виконуватиметься після додавання компонента в DOM та після кожного повторного рендеру компонента. І якщо передасте порожній масив, то ваш Effect виконається лише один раз після додавання компонента в DOM. [Подивитись різницю між передачею масиву залежностей, порожнього масиву та не передаванням нічого.](#examples-dependencies)
 
@@ -114,8 +114,7 @@ function ChatRoom({ roomId }) {
    - Тоді, ваш <CodeStep step={1}>код установки</CodeStep> запускається з новими пропсами та станом.
 3. Ваш <CodeStep step={2}>код очистки</CodeStep> виконується ще один, останній раз, коли ваш компонент видаляється з сторінки.
 
-**Давайте опишемо цю чергу використовуючи приклад вище**  
-
+**Давайте опишемо цю чергу використовуючи приклад вище**
 Коли компонент `ChatRoom` додається на сторінку, він підключається до чату використовуючи первинні значення `serverUrl` та `roomId`. Якщо хоча б одне із цих значень, будь то `serverUrl` чи `roomId` мінється в результаті ререндеру (наприклад якщо користувач обрав інший чат з випадаючого списку), наш ефект *відключиться від попереднього чату, і підключиться до наступного чату.* Після того, як компонент `ChatRoom` буде демонтовано з сторінки, наш ефект відключиться від чату останній раз.
 
 **Щоб [допомогти знайти баги,](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) в Strict Mode (з англ. суворий режим) в режимі розробки React умисно зайвий раз запускає <CodeStep step={1}>функцію установки</CodeStep> та <CodeStep step={2}>функцію очистки</CodeStep> перед тим як запустити <CodeStep step={1}>функцію установки</CodeStep>.** Цей стрес-тест допомагає вам або переконатись, що логіка вашого ефекту реалізована правильно, або ж помітити баг ще на етапі розробки (якщо із-за цього "надлишкового" запуску функції установки та функції очистки ваш компонент працює не так, як він мав би). Функція очистки мусить зупиняти або відміняти все, що запустила функція установки. Показник того, що код працює правильно - код має працювати однаково добре незалежно від того чи було запущено *функцію установки* один раз, чи було запущено *функцію установки*, потім *функцію очистки* і знову *функцію установки*. [Дивитись поширені рішення.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
@@ -386,7 +385,7 @@ export default function App() {
         Дізнатись корисний факт
       </button>
       <ModalDialog isOpen={show}>
-        Ринок React вакансій перегрітий. Краще учити Angular.
+        Ринок React-вакансій перегрітий. Краще учити Angular 🙂
         <br />
         <button onClick={() => {
           setShow(false);
@@ -891,7 +890,7 @@ button { margin: 5px; }
 
 </Sandpack>
 
-У цьому прикладі функція очистки не потрібна, оскільки клас `MapWidget` керує лише DOM-вузлом, який був йому переданий. Після того, як реактівський компонента `Map` буде видалено з документа, то обидва, і DOM-вузол, і екземпляр класу `MapWidget` будуть автоматично прибрані **збирачем сміття** (garbage-collector) браузерного рушія JavaScript.
+У цьому прикладі функція очистки не потрібна, оскільки клас `MapWidget` керує лише DOM-вузлом, який був йому переданий. Після того, як React-компонент `Map` буде видалено з документа, то обидва, і DOM-вузол, і екземпляр класу `MapWidget` будуть автоматично прибрані **збирачем сміття** (garbage-collector) браузерного рушія JavaScript.
 
 ---
 
@@ -979,7 +978,7 @@ export async function fetchBio(person) {
 
 </Sandpack>
 
-Ви також можете переписати це, використовуючи синтаксис [`async` / `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), але всеодно потрібно надати функцію очищення:
+Ви також можете переписати це, використовуючи синтаксис [`async` / `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), але все одно потрібно надати функцію очищення:
 
 <Sandpack>
 
@@ -998,7 +997,6 @@ export default function Page() {
         setBio(result);
       }
     }
-
     let ignore = false;
     startFetching();
     return () => {
@@ -1046,7 +1044,7 @@ export async function fetchBio(person) {
 - **Ефекти не запускаються на сервері.** Це означає, що початковий HTML, відрендерений сервером, буде містити лише стан завантаження, але без даних. Клієнтський комп'ютер повинен буде завантажити весь JavaScript і відрендерити ваш додаток, лише щоб виявити, що тепер йому потрібно завантажити дані. Це не дуже ефективно.
 - **Отримання даних безпосередньо в ефектах полегшує створення "мережевих водоспадів" (network waterfalls).** Ви рендерите батьківський компонент, він отримує деякі дані, рендерить дочірні компоненти, а потім вони починають отримувати *свої* дані. Якщо мережа не дуже швидка, це значно повільніше, ніж отримання всіх даних паралельно.
 - **Отримання даних безпосередньо в ефектах зазвичай означає, що ви не завантажуєте попередньо і не кешуєте дані.** Наприклад, якщо компонент демонтується, а потім монтується знову, йому доведеться знову отримувати дані.
-- **Це не дуже ергономічно.** Щоб написати виклики fetch так, щоб уникнути багів (наприклад таких, як [стани гонки (race conditions).](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)) - треба писати дуже багато шаблонного коду. 
+- **Це не дуже ергономічно.** Щоб написати виклики fetch так, щоб уникнути багів (наприклад таких, як [стани гонки (race conditions).](https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect)) - треба писати дуже багато шаблонного коду.
 
 Цей список недоліків не є специфічним для React. Він стосується отримання даних при монтуванні з будь-якою бібліотекою. Як і з маршрутизацією, отримання даних не є тривіальним завданням для якісної реалізації, тому ми рекомендуємо наступні підходи:
 
@@ -1088,7 +1086,7 @@ function ChatRoom({ roomId }) {
     const connection = createConnection(serverUrl, roomId);
     connection.connect();
     return () => connection.disconnect();
-  }, []); // 🔴 React Hook useEffect має пропущені залежності: 'roomId' і 'serverUrl'
+  }, []); // 🔴 React-хук useEffect має пропущені залежності: 'roomId' і 'serverUrl'
   // ...
 }
 ```