Apply suggestions from code review

Co-authored-by: Vitalii Perehonchuk <[email protected]>

Author: alinkedd

src/content/learn/render-and-commit.md

@@ -19,14 +19,14 @@ title: Рендер і коміт
 
 Уявіть, що ваші компоненти — це кухарі на кухні, які створюють смачні страви з інгредієнтів. У такій історії React — це офіціант, який приймає від клієнтів замовлення та видає їм їжу. Цей процес замовлення та подачі UI складається з трьох кроків:
 
-1. **Запуск** рендеру (доставка замовлення гостя на кухню)
+1. **Виклик** рендеру (відправлення замовлення гостя на кухню)
 2. **Рендеринг** компонента (підготовка замовлення на кухні)
-3. **Фіксація** у DOM (розміщення замовлення на столі)
+3. **Коміт** у DOM (розміщення замовлення на столі гостя)
 
 <IllustrationBlock sequential>
   <Illustration caption="Виклик" alt="React як офіціант у ресторані, що збирає замовлення від клієнтів і передає їх до Кухні компонентів." src="/images/docs/illustrations/i_render-and-commit1.png" />
-  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
-  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+  <Illustration caption="Рендер" alt="Кухар Card видає React свіжий компонент Card." src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="Коміт" alt="React доставляє Card клієнту на стіл." src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
 ## Крок 1: Запуск рендерингу {/*step-1-trigger-a-render*/}
@@ -36,9 +36,9 @@ title: Рендер і коміт
 1. Це **початковий рендер** компонента.
 2. **Було оновлено стан** компонента (або одного з його предків).
 
-### Початковий {/*initial-render*/}
+### Початковий рендер {/*initial-render*/}
 
-Під час запуску програми вам потрібно запустити початковий рендеринг. Фреймворки та пісочниці іноді приховують цей код, але це робиться шляхом виклику [`createRoot`](/reference/react-dom/client/createRoot) з цільового DOM-вузла, і потім викликом його методу `render` з вашим компонентом:
+Під час запуску застосунку необхідно викликати початковий рендер. Фреймворки та пісочниці іноді приховують цей код, але це виконується через виклик [`createRoot`](/reference/react-dom/client/createRoot) із передачею цільового вузла DOM, і потім через виклик методу `render` із вашим компонентом:
 
 <Sandpack>
 
@@ -63,28 +63,28 @@ export default function Image() {
 
 </Sandpack>
 
-Спробуйте закоментувати виклик `root.render()` і побачите, що компонент зникне!
+Спробуйте закоментувати виклик `root.render()` — і побачите, що компонент зник!
 
-### Повторний рендеринг при оновленні стану {/*re-renders-when-state-updates*/}
+### Повторний рендер під час оновлення стану {/*re-renders-when-state-updates*/}
 
-Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою функції[`set` function.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично ставить рендеринг у чергу. (Ви можете уявити це як відвідувача ресторану, який після першого замовлення замовляє чай, десерт та інші речі, залежно від стану спраги чи голоду).
+Після першого рендерингу компонента ви можете викликати подальші рендеринги, оновивши його стан за допомогою [функції `set`.](/reference/react/useState#setstate) Оновлення стану вашого компонента автоматично додає рендеринг до черги. (Уявіть відвідувача ресторану, який після першого замовлення замовляє чай, десерт та всяку всячину залежно від стану спраги чи голоду).
 
 <IllustrationBlock sequential>
-  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
-  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
-  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+  <Illustration caption="Оновлення стану..." alt="React як офіціант у ресторані, що подає клієнту, представленому як постать з курсором замість голови, UI Card. Постать висловлює бажання щодо рожевої картки, а не чорної!" src="/images/docs/illustrations/i_rerender1.png" />
+  <Illustration caption="...викликає..." alt="React повертається до Кухні компонентів і каже Кухареві Card, що потрібна рожева Card." src="/images/docs/illustrations/i_rerender2.png" />
+  <Illustration caption="...рендер!" alt="Кухар Card видає React рожеву Card." src="/images/docs/illustrations/i_rerender3.png" />
 </IllustrationBlock>
 
 ## Крок 2: React рендерить ваші компоненти {/*step-2-react-renders-your-components*/}
 
-Після того, як ви запускаєте рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екраню **"Рендеринг" - це виклик React'ом ваших компонентів.**
+Коли викликано рендер, React викликає ваші компоненти, щоб з'ясувати, що виводити на екран. **"Рендеринг" — це коли React викликає ваші компоненти.**
 
-* **При початковому рендерингу,** React викличе кореневий компонент.
-* **Для наступних рендерів,** React буде викликати компонент функції, оновлення стану якого викликало рендер.
+* **Під час початкового рендеру** React викличе кореневий компонент.
+* **Для наступних рендерів** React викликатиме компонент-функцію, оновлення стану якого власне почало рендер.
 
-Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _цей_ компонент наступним і так далі. Процес продовжуватиметься доти, доки не залишиться більше вкладених компонентів і React точно знатиме, що саме має бути відображено на екрані.
+Цей процес є рекурсивним: якщо оновлений компонент повертає якийсь інший компонент, React буде рендерити _цей_ компонент наступним, і якщо цей компонент також щось повертає, він буде рендерити _той інший_ компонент наступним, і так далі. Процес триватиме доти, доки не залишиться більше вкладених компонентів, і React точно не знатиме, що саме має бути відображено на екрані.
 
-У наступному прикладі React викличе `Gallery()` і `Image()` кілька разів:
+У наступному прикладі React викличе `Gallery()` й `Image()` кілька разів:
 
 <Sandpack>
 
@@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **Під час початкового рендерингу,** React [створить вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>`, і трьох `<img>` тегів. 
-* **Під час ре-рендерингу,** React вирахує, які властивості цих елементів, якщо такі були, змінилися з моменту попереднього рендерингу. Він нічого не буде робити з цією інформацією до наступного кроку, фази фіксації.
+* **Під час початкового рендеру** React [створює вузли DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) для `<section>`, `<h1>` і трьох тегів `<img>`. 
+* **Під час повторного рендеру* React вираховує, які властивості елементів змінилися після попереднього рендеру та чи змінилися взагалі. Він нічого не робить з цією інформацією до наступного кроку, фази коміту.
 
 <Pitfall>
 
 Рендеринг завжди має бути [чистим обчисленням](/learn/keeping-components-pure):
 
-* **Однакові вхідні дані, однаковий результат.** При однакових вхідних даних компонент завжди має повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!)
-* **Займається своїми справами.** Він не повинен змінювати жодних об'єктів або змінних, які існували до рендерингу. (Одне замовлення не повинно змінювати інші замовлення.)
+* **Однакові вихідні дані дають однаковий результат.** Для однакових вихідних даних компонент завжди повинен повертати однаковий JSX. (Коли хтось замовляє салат з помідорами, він не повинен отримати салат з цибулею!)
+* **Кожен робить свою роботу.** Рендер не повинен змінювати жодних об'єктів або змінних, які існували до нього. (Одне замовлення не повинно змінювати інші замовлення.)
 
-Інакше ви можете зіткнутися із заплутаними багами та непередбачуваною поведінкою зі зростанням складності вашої кодової бази. При розробці у "Strict Mode" React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями.
+Інакше ви можете зіткнутися із заплутаними помилками та непередбачуваною поведінкою зі зростанням складності кодової бази. Під час розробки у суворому режимі ("Strict Mode") React викликає функцію кожного компонента двічі, що може допомогти виявити помилки, спричинені нечистими функціями.
 
 </Pitfall>
 
 <DeepDive>
 
 #### Оптимізація продуктивності {/*optimizing-performance*/}
 
-Поведінка за замовчуванням, яка полягає у рендерингу усіх компонентів, вкладених у оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо у дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі [Продуктивність](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!**
+Стандартна поведінка, яка полягає у рендерингу всіх компонентів, вкладених в оновлений компонент, не є оптимальною для продуктивності, якщо оновлений компонент знаходиться дуже високо в дереві. Якщо ви зіткнулися з проблемою продуктивності, є кілька варіантів її вирішення, описаних в розділі ["Продуктивність"](https://reactjs.org/docs/optimizing-performance.html). **Не оптимізуйте передчасно!**
 
 </DeepDive>
 
 ## Крок 3: React фіксує зміни в DOM {/*step-3-react-commits-changes-to-the-dom*/}
 
-Після рендерингу (виклику) ваших компонентів, React змінюватиме DOM.
+Після рендерингу (виклику) ваших компонентів React вносить зміни в DOM.
 
-* **Для початкового рендерингу,** React використовуватиме [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API, щоб вивести на екран усі створені ним вузли DOM.
-* **Для ре-рендерингів,** React застосовуватиме мінімально необхідні операції (обчислені під час рендерингу!) щоб зробити DOM відповідним останньому результату рендерингу.
+* **Для початкового рендерингу** React використовує API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild), щоб вивести на екран усі новостворені вузли DOM.
+* **Для повторних рендерів** React застосовує мінімально необхідні операції (обчислені під час рендерингу!), щоб оновити DOM відповідно до результату найсвіжішого рендерингу.
 
-**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який ре-рендериться щосекунди з різними пропсами, переданими від батька. Зверніть увагу, що ви можете додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент ре-рендериться:
+**React змінює вузли DOM тільки якщо є різниця між рендерами.** Наприклад, ось компонент, який повторно рендериться щосекунди з різними властивостями, що передаються від батьківського компонента. Зверніть увагу, що можна додати текст у `<input>`, оновивши його `value`, але текст не зникає, коли компонент рендериться наново:
 
 <Sandpack>
 
@@ -193,8 +193,7 @@ export default function App() {
 
 </Sandpack>
 
-Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` з новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`!
-
+Це працює, тому що на останньому кроці React оновлює лише вміст `<h1>` новим `time`. Він бачить, що `<input>` з'являється в JSX в тому ж місці, що і минулого разу, тому React не чіпає `<input>` — або його `value`!
 ## Епілог: Малювання браузера {/*epilogue-browser-paint*/}
 
 Після того, як рендеринг завершено і React оновив DOM, браузер перемалює екран. Хоча цей процес відомий як "рендеринг браузера", ми будемо називати його "малюванням", щоб уникнути плутанини в документації.