diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index 9a7a0ec09..c6ba9ca36 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -4,7 +4,7 @@ title: Додавання до черги низки оновлень стану -Задання змінної стану ставить у чергу ще один рендер. Проте іноді може викинути потреба виконати кілько операцій над значенням, перш ніж додавати до черги новий рендер. Щоб це зробити, корисно розуміти, як React групує оновлення стану. +Задання значення змінній стану ставить у чергу ще один рендер. Проте іноді може виникнути потреба виконати кілька операцій над значенням, перш ніж додавати до черги новий рендер. Щоб це зробити, корисно розуміти, як React групує оновлення стану. @@ -55,11 +55,11 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -Але тут грає роль ще один чинник. **React чекає, поки не виконається *ввесь* код у обробниках подій, перш ніж обробляти ваші оновлення стану.** Саме тому повторний рендер відбувається *після* всіх цих викликів `setNumber()`. +Але тут грає роль ще один чинник. **React чекає, поки не виконається *весь* код у обробниках подій, перш ніж обробляти ваші оновлення стану.** Саме тому повторний рендер відбувається *після* всіх цих викликів `setNumber()`. Це може нагадати офіціанта, що приймає замовлення в ресторані. Він не бігає на кухню, коли названа одна страва! Замість цього він дає змогу зробити замовлення повністю, внести до нього зміни й навіть прийняти замовлення від інших людей за тим же столом. -ʼ + Це дає змогу оновлювати кілька змінних стану — навіть з різних компонентів — не запускаючи забагато [повторних рендерів.](/learn/render-and-commit#re-renders-when-state-updates) Але це також означає, що UI не оновиться, поки не завершиться вам обробник події та ввесь код у ньому. Така логіка, також відома як **групування,** робить ваш застосунок на React куди швидшим. Також це позбавляє потреби мати справу з безглуздими "напівготовими" рендерами, в яких оновилась лише частина змінних. @@ -102,7 +102,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } Тут `n => n + 1` зветься **функцією-оновлювачем.** Коли ви передаєте її до сетера стану: 1. React додає цю функцію в чергу до обробки, коли решта коду в обробнику події завершилася. -2. Під час наступного рендеру React йде по черзі та видає остаточний оновлений стан. +2. Під час наступного рендеру React йде чергою та видає остаточний оновлений стан. ```js setNumber(n => n + 1); @@ -110,13 +110,13 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -Ось як React проходить по цих рядках коду, виконуючи обробник подій: +Ось як React проходить цими рядками коду, виконуючи обробник подій: 1. `setNumber(n => n + 1)`: `n => n + 1` — це функція. React додає її до черги. -2. `setNumber(n => n + 1)`: `n => n + 1` — це функція. React додає її до черги. -3. `setNumber(n => n + 1)`: `n => n + 1` — це функція. React додає її до черги. +1. `setNumber(n => n + 1)`: `n => n + 1` — це функція. React додає її до черги. +1. `setNumber(n => n + 1)`: `n => n + 1` — це функція. React додає її до черги. -Коли `useState` викликається під час наступного рендеру, React проходить по черзі. Попередній стан `number` був `0`, і це саме те, що React передає до першої функції-оновлювача як аргумент `n`. Потім React бере повернене значення нашої попередньої функції-оновлювача й передає його до наступного оновлювача як `n`, і так далі: +Коли `useState` викликається під час наступного рендеру, React проходить чергою. Попередній стан `number` був `0`, і це саме те, що React передає до першої функції-оновлювача як аргумент `n`. Потім React бере повернене значення нашої попередньої функції-оновлювача й передає його до наступного оновлювача як `n`, і так далі: | оновлення в черзі | `n` | повертає | | ----------------- | --- | ----------- | @@ -129,7 +129,7 @@ React зберігає `3` як остаточний результат і по Саме тому клацання "+3" у прикладі вище коректно збільшує значення на 3. ### Що відбудеться, якщо оновити стан, спершу замінивши його {/*what-happens-if-you-update-state-after-replacing-it*/} -Як щодо цього обробника подій? Як гадаєте, чим буде `number` у наступному рендері? +Як щодо цього обробника подій? Як гадаєте, яке значення матиме `number` у наступному рендері? ```js