Apply suggestions from code review

Co-authored-by: Alina Listunova <[email protected]>

Author: astropsy999

src/content/learn/scaling-up-with-reducer-and-context.md

@@ -10,15 +10,15 @@ title: Масштабування з використанням контекст
 
 <YouWillLearn>
 
-* Як поєднати з контекстом
-* Як уникнути передачі стану та диспатча через пропси
+* Як поєднати редюсер із контекстом
+* Як уникнути передавання стану та відправляння подій через пропси
 * Як зберігати логіку контексту і стану в окремому файлі
 
 </YouWillLearn>
 
 ## Поєднання редюсера з контекстом {/*combining-a-reducer-with-context*/}
 
- Як ми вже бачили, у прикладі з [цього розділу](/learn/extracting-state-logic-into-a-reducer), стан керується редюсером. Функція редюсера містить всю логіку оновлення стану і оголошена в кінці файлу:
+Як ми вже бачили у прикладі з [цього розділу](/learn/extracting-state-logic-into-a-reducer), стан керується редюсером. Функція редюсера містить всю логіку оновлення стану і оголошена в кінці файлу:
 
 <Sandpack>
 
@@ -207,7 +207,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Редюсер допомагає тримати обробники подій короткими і зрозумілими. Проте, з розвитком вашого додатка може виникнути проблема. **Наразі стан `tasks` та функція `dispatch` доступні тільки в компоненті `TaskApp` на верхньому рівні.** Щоб інші компоненти могли отримувати та оновлювати перелік завдань, потрібно явно [передавати](#passing-props-to-a-component) пропсами поточний стан і обробники подій.
+Редюсер допомагає тримати обробники подій короткими і зрозумілими. Проте може виникнути проблема, коли ваш застосунок зросте. **Наразі стан `tasks` та функція `dispatch` доступні тільки в компоненті `TaskApp` на верхньому рівні.** Щоб інші компоненти могли отримувати та оновлювати перелік завдань, потрібно явно [передавати](#passing-props-to-a-component) поточний стан і обробники подій, які змінюють його, як пропси.
 
 Наприклад, `TaskApp` передає перелік завдань і обробники подій компоненту `TaskList`:
 
@@ -229,25 +229,25 @@ ul, li { margin: 0; padding: 0; }
 />
 ```
 
-У невеликому прикладі це добре працює, але якщо у вас є десятки або сотні вкладених компонентів, передавати таким чином весь стан і функції може бути досить неприємно!
+У невеликому прикладі це працює добре, але якщо у вас є десятки або сотні вкладених компонентів, передавати так увесь стан і функції може бути досить неприємно!
 
-Тому, як альтернатива передачі через пропси, ви можете помістити і стан `tasks`, і функцію `dispatch` [в контекст](/learn/passing-data-deeply-with-context). **Таким чином, будь-який компонент, що знаходиться нижче `TaskApp` у дереві, може мати доступ та надсилати події, уникнувши передачі пропсів через безліч компонентів.**
+Тому, як альтернатива передаванню через пропси, ви можете помістити і стан `tasks`, і функцію `dispatch` [в контекст](/learn/passing-data-deeply-with-context). **У такий спосіб, будь-який компонент, що знаходиться нижче `TaskApp` у дереві, може мати доступ та надсилати події, уникнувши передавання пропсів через безліч компонентів ("prop drilling").**
 
 Ось як можна поєднати редюсер із контекстом:
 
 1. **Створіть** контекст.
-2. **Розмістіть** стан і диспетчер у контексті.
+2. **Помістіть** стан і функцію dispatch у контекст.
 3. **Використовуйте** контекст будь-де в дереві компонентів.
 
-### Крок 1: Створення контексту {/*step-1-create-the-context*/}
+### Крок 1: Створіть контекст {/*step-1-create-the-context*/}
 
 Хук `useReducer` повертає поточний стан `tasks` та функцію `dispatch`, яка дає змогу оновлювати цей стан:
 
 ```js
 const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 ```
 
-Щоб передати їх далі по дереву, [створить](/learn/passing-data-deeply-with-context#step-2-use-the-context) два окремих контексти:
+Щоб передати їх далі деревом, [створіть](/learn/passing-data-deeply-with-context#step-2-use-the-context) два окремих контексти:
 
 - `TasksContext` надає поточний перелік завдань.
 - `TasksDispatchContext` надає функцію, яка дає змогу компонентам надсилати події.
@@ -448,11 +448,11 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Тут ви передаєте `null` як значення за замовчуванням для обох контекстів. Дійсні значення будуть надані компонентом `TaskApp`.
+Тут ви передаєте `null` як початкове значення для обох контекстів. Дійсні значення будуть надані компонентом `TaskApp`.
 
 ### Крок 2: Помістіть стан і функцію dispatch у контекст {/*step-2-put-state-and-dispatch-into-context*/}
 
-Тепер ви можете імпортувати обидва контексти у ваш компонент `TaskApp`. Візьміть `tasks` та `dispatch`, які повертає `useReducer()`, і [надайте їх](/learn/passing-data-deeply-with-context#step-3-provide-the-context) всьому вкладеному дереву компонентів:
+Тепер ви можете імпортувати обидва контексти у ваш компонент `TaskApp`. Візьміть `tasks` та `dispatch`, повернуті хуком `useReducer()`, і [надайте їх](/learn/passing-data-deeply-with-context#step-3-provide-the-context) всьому вкладеному дереву компонентів:
 
 ```js {4,7-8}
 import { TasksContext, TasksDispatchContext } from './TasksContext.js';
@@ -669,9 +669,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-На наступному етапі видалимо передачу пропсів.
+Далі видалимо передавання пропсів.
 
-### Step 3: Використовуйте контекст у будь-якому місці дерева компонентів {/*step-3-use-context-anywhere-in-the-tree*/}
+### Крок 3: Використовуйте контекст будь-де у дереві компонентів {/*step-3-use-context-anywhere-in-the-tree*/}
 
 Тепер вам не потрібно передавати перелік завдань або обробники подій скрізь усе дерево компонентів:
 
@@ -693,7 +693,7 @@ export default function TaskList() {
   // ...
 ```
 
-Щоб оновити перелік завдань, будь-який компонент може взяти функцію `dispatch` з контексту та викликати її:
+Щоб оновити перелік завдань, будь-який компонент може взяти функцію `dispatch` із контексту та викликати її:
 
 ```js {3,9-13}
 export default function AddTask() {
@@ -713,7 +713,7 @@ export default function AddTask() {
     // ...
 ```
 
-**Компонент `TaskApp` не передає жодних обробників подій, і `TaskList` також не передає нічого компоненту `Task`.** Кожен компонент обирає лише потрібний йому контекст:
+**Компонент `TaskApp` не передає жодних обробників подій, і `TaskList` також не передає нічого компоненту `Task`.** Кожен компонент вибирає лише потрібний йому контекст:
 
 <Sandpack>
 
@@ -897,7 +897,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-**Стан все ще "живе" у компоненті `TaskApp` на верхньому рівні та керується за допомогою `useReducer`.** Але його `tasks` і `dispatch` тепер доступні кожному компоненту нижче в дереві, завдяки імпорту та використанню контекстів.
+**Стан все ще "живе" у компоненті `TaskApp` на верхньому рівні та керується за допомогою `useReducer`.** Але його `tasks` і `dispatch` тепер доступні кожному компоненту нижче в дереві завдяки імпорту та використанню контекстів.
 
 ## Переміщення всієї логіки в один файл {/*moving-all-wiring-into-a-single-file*/}
 
@@ -910,11 +910,11 @@ export const TasksContext = createContext(null);
 export const TasksDispatchContext = createContext(null);
 ```
 
-Цей файл скоро стане більш наповненим! Додамо в нього редюсер. Потім оголосимо новий компонент `TasksProvider`. Цей компонент об’єднає всі частини разом. Він:
+Цей файл скоро стане більш наповненим! Додамо в нього редюсер. Потім оголосимо новий компонент `TasksProvider`. Цей компонент зв'яже всі частини разом. Він:
 
 1. Керуватиме станом за допомогою редюсера.
-2. Надаватиме обидва контексти компонентам нижчим в ієрархії.
-3. [Прийматиме `children` як пропс](/learn/passing-props-to-a-component#passing-jsx-as-children), щоб було можливим передавати в нього JSX.
+2. Надаватиме обидва контексти ієрархічно нижчим компонентам.
+3. [Матиме проп `children`](/learn/passing-props-to-a-component#passing-jsx-as-children), щоб було можливим передавати в нього JSX.
 
 ```js
 export function TasksProvider({ children }) {
@@ -1140,7 +1140,7 @@ const tasks = useTasks();
 const dispatch = useTasksDispatch();
 ```
 
-**Це не змінює функціональність, але дає змогу згодом розділити контексти або додати логіку. Тепер усі налаштування контексту та редюсера знаходяться у файлі `TasksContext.js`. Це допомагає зберегти компоненти чистими і не перевантаженими, зосередженими на відображенні даних, а не на їх отриманні.**
+**Це не змінює функціональність, але дає змогу згодом розділити контексти або додати логіку. Тепер усі налаштування контексту та редюсера знаходяться у файлі `TasksContext.js`. Це допомагає зберегти компоненти чистими і неперевантаженими, зосередженими на відображенні даних, а не на їхньому отриманні.**
 
 <Sandpack>
 
@@ -1340,27 +1340,27 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Ви можете вважати `TasksProvider` частиною інтерфейсу, яка відповідає за роботу з завданнями, `useTasks` — способом доступу до завдань, а `useTasksDispatch` — способом їх оновлення з будь-якого компонента, що знаходиться нижче в дереві компонентів.
+Ви можете вважати `TasksProvider` частиною інтерфейсу, яка відповідає за роботу з завданнями, `useTasks` — способом доступу до завдань, а `useTasksDispatch` — способом їхнього оновлення з будь-якого компонента, що знаходиться нижче в дереві компонентів.
 
 <Note>
 
-Функції на кшталт `useTasks` та `useTasksDispatch` називаються *[Хуками користувача](/learn/reusing-logic-with-custom-hooks)*. Ваша функція вважається хуком користувача, якщо її назва починається з `use`. Це дає змогу використовувати інші хуки, як-от `useContext`, всередині неї.
+Функції на кшталт `useTasks` та `useTasksDispatch` називаються *[хуками користувача (Custom Hooks)](/learn/reusing-logic-with-custom-hooks)*. Ваша функція вважається хуком користувача, якщо її назва починається з `use`. Це дає змогу використовувати інші хуки, як-от `useContext`, всередині неї.
 
 </Note>
 
-Коли додаток зростає, у вас може з’явитися багато пар контекст-редюсерів. Це потужний спосіб масштабувати додаток і [ділитися станом](/learn/sharing-state-between-components) без зайвих зусиль щоразу, коли потрібно отримати дані з глибини дерева компонентів.
+Коли застосунок зростає, у вас може з'явитися багато пар "контекст-редюсер". Це потужний спосіб масштабувати застосунок і [ділитися станом](/learn/sharing-state-between-components) без зайвих зусиль щоразу, коли потрібно отримати дані глибоко в дереві компонентів.
 
 <Recap>
 
-- Ви можете об'єднати редюсер з контекстом, щоб будь-який компонент міг мати доступ та оновлювати стан у компонентах вищих за ієрархією.
+- Ви можете об'єднати редюсер із контекстом, щоб будь-який компонент міг отримати та оновити стан, що вище деревом.
 - Щоб надати стан і функцію `dispatch` компонентам нижче:
   1. Створіть два контексти (для стану і для функцій `dispatch`).
   2. Надайте обидва контексти компоненту, який використовує редюсер.
-  3. Використовуйте будь-який контекст у компонентах, яким потрібно мати ці дані.
-- Щоб ще більше спростити компоненти, виносьте ці налаштування в один файл.
+  3. Використовуйте будь-який із цих контекстів у компонентах, яким вони потрібні.
+- Щоб ще більше спростити компоненти, винесіть відповідну логіку в один файл.
   - Експортуйте компонент, наприклад `TasksProvider`, який надає контекст.
-  - Ви також можете експортувати користувацькі хуки, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту.
-- У додатку може бути багато схожих на цю пар контекст-редюсерів.
+  - Ви також можете експортувати хуки користувача, як-от `useTasks` та `useTasksDispatch`, для доступу до контексту.
+- У застосунку може бути багато схожих на цю пар "контекст-редюсер".
 
 </Recap>