diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 17bd087ed..a1d03834e 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: Responding to Events
+title: Реагування на події
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React надає вам можливість додавати *обробники подій* до вашого JSX. Обробники подій — це ваші власні функції, які виконуватимуться у відповідь на різні взаємодії, як-от натискання мишкою, наведення курсора, фокусування в елементі введення даних у формі тощо.
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Різні способи написання обробника подій
+* Як передати логіку обробки подій від батьківського компонента
+* Поширення подій і як це зупинити
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## Додавання обробників подій {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Щоб додати обробник подій, спочатку визначте функцію, а потім [передайте її як проп](/learn/passing-props-to-a-component) у відповідний JSX-тег. Наприклад, ось кнопка, яка ще нічого не робить:
 
 <Sandpack>
 
@@ -26,7 +26,7 @@ To add an event handler, you will first define a function and then [pass it as a
 export default function Button() {
   return (
     <button>
-      I don't do anything
+      Я нічого не роблю
     </button>
   );
 }
@@ -34,23 +34,23 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+Ви можете налаштувати показ повідомлення, коли користувач натискає на неї, виконавши ці три кроки:
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. Оголосіть функцію з назвою `handleClick` *усередині* вашого компонента `Button`.
+2. Реалізуйте логіку всередині цієї функції (використовуйте `alert`, щоб показати повідомлення).
+3. Додайте `onClick={handleClick}` до `<button>` JSX.
 
 <Sandpack>
 
 ```js
 export default function Button() {
   function handleClick() {
-    alert('You clicked me!');
+    alert('Ви натиснули на мене!');
   }
 
   return (
     <button onClick={handleClick}>
-      Click me
+      Натисни на мене
     </button>
   );
 }
@@ -62,77 +62,77 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+Ви визначили функцію `handleClick`, а потім [передали її як проп](/learn/passing-props-to-a-component) до `<button>`. `handleClick` є **обробником події.** Функції-обробники подій:
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* Зазвичай визначаються *всередині* ваших компонентів.
+* Мають назви, які починаються з `handle`, після якого зазначена назва події.
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+Зазвичай, типова назва обробників подій складається з `handle` (`обробити`) та назви події. Ви часто побачите щось на кшталт `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}` тощо.
 
-Alternatively, you can define an event handler inline in the JSX:
+Крім того, ви можете визначити обробник подій, вбудований у JSX:
 
 ```jsx
 <button onClick={function handleClick() {
-  alert('You clicked me!');
+  alert('Ви натиснули на мене!');
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+Або більш стисло за допомогою функції зі стрілкою (анонімною):
 
 ```jsx
 <button onClick={() => {
-  alert('You clicked me!');
+  alert('Ви натиснули на мене!');
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Усі ці стилі рівноцінні. Вбудовані обробники подій зручні для коротких функцій.
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+Функції, що передаються обробникам подій, повинні передаватися, а не викликатися. Наприклад:
 
-| passing a function (correct)     | calling a function (incorrect)     |
+| передавання функції (правильно)     | виклик функції (неправильно)     |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+Різниця незначна. У першому прикладі функція `handleClick` передається як обробник події `onClick`. Це вказує React запам'ятати її та викликати вашу функцію лише тоді, коли користувач натискає на кнопку.
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+У другому прикладі круглі дужки `()` наприкінці `handleClick()` викликають функцію *одразу* під час [рендерингу](/learn/render-and-commit) і без будь-яких натискань. Це відбувається тому, що JavaScript всередині [`{` і `} у JSX`](/learn/javascript-in-jsx-with-curly-braces) виконується одразу.
 
-When you write code inline, the same pitfall presents itself in a different way:
+Коли ви пишете вбудований у JSX код, той самий підводний камінь з'являється трохи в іншому місці:
 
-| passing a function (correct)            | calling a function (incorrect)    |
+| передавання функції (правильно)            | виклик функції (неправильно)    |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Передання вбудованого коду, подібного до цього, не запускатиметься після натискання — він виконуватиметься кожного разу під час рендерингу компонента:
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
-<button onClick={alert('You clicked me!')}>
+// Це сповіщення спрацьовує під час рендерингу компонента, а не після натискання!
+<button onClick={alert('Ви натиснули на мене!')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Якщо ви хочете визначити свій вбудований обробник подій, оберніть його в анонімну функцію так:
 
 ```jsx
-<button onClick={() => alert('You clicked me!')}>
+<button onClick={() => alert('Ви натиснули на мене!')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+Замість того, щоб виконувати код всередині під час кожного рендеру, це створює функцію, яка буде викликатися пізніше.
 
-In both cases, what you want to pass is a function:
+В обох випадках ви хочете передати саме функцію:
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` передає функцію `handleClick`.
+* `<button onClick={() => alert('...')}>` передає функцію `() => alert('...')`.
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[Докладніше про функції зі стрілками.](https://uk.javascript.info/arrow-functions-basics)
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Читання пропсів в обробниках подій {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Оскільки обробники подій оголошені всередині компонента, вони мають доступ до пропсів компонента. Ось кнопка, при натисканні на яку відображається сповіщення з текстом із пропу `message` (повідомлення):
 
 <Sandpack>
 
@@ -148,11 +148,11 @@ function AlertButton({ message, children }) {
 export default function Toolbar() {
   return (
     <div>
-      <AlertButton message="Playing!">
-        Play Movie
+      <AlertButton message="Відтворюється!">
+        Відтворити фільм
       </AlertButton>
-      <AlertButton message="Uploading!">
-        Upload Image
+      <AlertButton message="Завантажується!">
+        Завантажити зображення
       </AlertButton>
     </div>
   );
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+У такий спосіб ці дві кнопки відображатимуть різні повідомлення. Спробуйте змінити повідомлення, які їм передаються.
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Передавання обробників подій як пропсів {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+Часто потрібно, щоб батьківський компонент визначав обробник подій для дочірнього. Розгляньте кнопки: залежно від того, де використовується компонент `Button`, ви можете виконати іншу функцію — до прикладу, одна відтворює фільм, а інша завантажує зображення. 
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Для цього передайте проп як обробник подій, який компонент отримає від свого батька, ось так:
 
 <Sandpack>
 
@@ -186,20 +186,20 @@ function Button({ onClick, children }) {
 
 function PlayButton({ movieName }) {
   function handlePlayClick() {
-    alert(`Playing ${movieName}!`);
+    alert(`Відтворюється ${movieName}!`);
   }
 
   return (
     <Button onClick={handlePlayClick}>
-      Play "{movieName}"
+      Відтворити "{movieName}"
     </Button>
   );
 }
 
 function UploadButton() {
   return (
-    <Button onClick={() => alert('Uploading!')}>
-      Upload Image
+    <Button onClick={() => alert('Завантажується!')}>
+      Завантажити зображення
     </Button>
   );
 }
@@ -207,7 +207,7 @@ function UploadButton() {
 export default function Toolbar() {
   return (
     <div>
-      <PlayButton movieName="Kiki's Delivery Service" />
+      <PlayButton movieName="Сервіс доставлення Кікі" />
       <UploadButton />
     </div>
   );
@@ -220,22 +220,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+У цьому прикладі компонент `Toolbar` рендерить кнопки `PlayButton` і `UploadButton`:
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- `PlayButton` передає `handlePlayClick` як проп `onClick` до `Button`.
+- `UploadButton` передає `() => alert('Завантажується!')` як проп `onClick` до `Button`.
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+Нарешті, ваш компонент `Button` приймає проп `onClick`. Він передає цей проп одразу у вбудований тег браузера `<button>` за допомогою `onClick={onClick}`. Це вказує React викликати передану функцію після натискання.
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+Якщо ви використовуєте певну [систему дизайну](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), то компоненти, як-от кнопки, зазвичай містять стилізацію, але не визначають поведінку. Натомість такі компоненти, як `PlayButton` і `UploadButton`, передаватимуть обробники подій.
 
-### Naming event handler props {/*naming-event-handler-props*/}
+### Іменування пропсів обробників подій {/*naming-event-handler-props*/}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+Вбудовані компоненти, як-от `<button>` і `<div>`, підтримують лише [назви подій браузера](/reference/react-dom/components/common#common-props), як `onClick`. Однак, коли ви створюєте власні компоненти, ви можете назвати їхні пропси обробників подій як завгодно.
 
-By convention, event handler props should start with `on`, followed by a capital letter.
+За домовленістю пропси обробників подій мають починатися з `on`, за якою йде велика літера.
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+Наприклад, проп `onClick` компонента `Button` міг би називатися `onSmash`:
 
 <Sandpack>
 
@@ -251,11 +251,11 @@ function Button({ onSmash, children }) {
 export default function App() {
   return (
     <div>
-      <Button onSmash={() => alert('Playing!')}>
-        Play Movie
+      <Button onSmash={() => alert('Відтворюється!')}>
+        Відтворити фільм
       </Button>
-      <Button onSmash={() => alert('Uploading!')}>
-        Upload Image
+      <Button onSmash={() => alert('Завантажується!')}>
+        Завантажити зображення
       </Button>
     </div>
   );
@@ -268,9 +268,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+У цьому прикладі `<button onClick={onSmash}>` показує, що браузерний тег `<button>` (нижній регістр) усе ще потребує проп із назвою `onClick`, але назва пропу, отримана вашим власним компонентом `Button`, повністю залежить від вас!
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+Якщо ваш компонент підтримує кілька типів взаємодії, ви можете назвати пропси обробників подій відповідно до мети їхнього застосування. Наприклад, цей компонент `Toolbar` отримує обробники подій `onPlayMovie` і `onUploadImage`:
 
 <Sandpack>
 
@@ -278,8 +278,8 @@ When your component supports multiple interactions, you might name event handler
 export default function App() {
   return (
     <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('Відтворюється!')}
+      onUploadImage={() => alert('Завантажується!')}
     />
   );
 }
@@ -288,10 +288,10 @@ function Toolbar({ onPlayMovie, onUploadImage }) {
   return (
     <div>
       <Button onClick={onPlayMovie}>
-        Play Movie
+        Відтворити фільм
       </Button>
       <Button onClick={onUploadImage}>
-        Upload Image
+        Завантажити зображення
       </Button>
     </div>
   );
@@ -312,19 +312,19 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+Зверніть увагу, що компоненту `App` не потрібно знати, *що* `Toolbar` робитиме з `onPlayMovie` або `onUploadImage`. То вже частина реалізації `Toolbar`. Тут `Toolbar` передає їх як обробники `onClick` своїм компонентам `Button`, але він також може викликати їх потім у відповідь на певне сполучення клавіш. Іменування пропсів за типом взаємодії з програмою, як-от `onPlayMovie`, дає вам можливість змінити спосіб їх використання пізніше.
   
 <Note>
 
-Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<div onClick={handleClick}>`. Using a real browser `<button>` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
+Переконайтеся, що ви використовуєте відповідні теги HTML для своїх обробників подій. Наприклад, для обробки натискань використовуйте [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) замість `<div onClick={handleClick}>`. Використання наявного у браузері тегу `<button>` дає змогу використовувати вбудовані функції браузера, як-от навігація за допомогою клавіатури. Якщо вам не до вподоби початкова стилізація кнопки у браузері і ви бажаєте зробити її більше схожою на посилання чи інший елемент UI, використовуйте CSS. [Докладніше про створення доступної розмітки.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)
   
 </Note>
 
-## Event propagation {/*event-propagation*/}
+## Поширення події {/*event-propagation*/}
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+Обробники подій також будуть реагувати на події від будь-яких дочірніх компонентів вашого компонента. Ми говоримо, що подія "спливає" ("bubbles") або "поширюється" ("propagates") деревом: вона починається з того місця, де відбулася подія, а потім піднімається деревом.
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+Цей `<div>` містить дві кнопки. `<div>` *і* кожна кнопка мають власні обробники `onClick`. Як ви думаєте, які обробники спрацюють, коли ви натиснете на кнопку?
 
 <Sandpack>
 
@@ -334,11 +334,11 @@ export default function Toolbar() {
     <div className="Toolbar" onClick={() => {
       alert('You clicked on the toolbar!');
     }}>
-      <button onClick={() => alert('Playing!')}>
-        Play Movie
+      <button onClick={() => alert('Відтворюється!')}>
+        Відтворити фільм
       </button>
-      <button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <button onClick={() => alert('Завантажується!')}>
+        Завантажити зображення
       </button>
     </div>
   );
@@ -355,19 +355,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+Якщо ви натиснете на будь-яку кнопку, спочатку виконається її `onClick`, а потім `onClick` батьківського `<div>`. Отже, з'являться два повідомлення. Якщо ви натиснете на саму панель інструментів, виконається лише `onClick` батьківського `<div>`.
 
 <Pitfall>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+У React поширюються усі події, крім `onScroll`, який працює лише з тегом JSX, до якого ви його прикріплюєте.
 
 </Pitfall>
 
-### Stopping propagation {/*stopping-propagation*/}
+### Зупинка поширення {/*stopping-propagation*/}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+Обробники подій отримують лиш один аргумент — **об'єкт події**. За домовленістю його зазвичай оголошують як `e` — скорочено від "event", що означає "подія". Ви можете використовувати цей об'єкт для читання інформації про подію.
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+Цей об'єкт події також дозволяє зупинити поширення. Якщо ви хочете, щоб подія не дійшла до батьківських компонентів, вам потрібно викликати `e.stopPropagation()` подібно до цього компонента `Button`:
 
 <Sandpack>
 
@@ -388,11 +388,11 @@ export default function Toolbar() {
     <div className="Toolbar" onClick={() => {
       alert('You clicked on the toolbar!');
     }}>
-      <Button onClick={() => alert('Playing!')}>
-        Play Movie
+      <Button onClick={() => alert('Відтворюється!')}>
+        Відтворити фільм
       </Button>
-      <Button onClick={() => alert('Uploading!')}>
-        Upload Image
+      <Button onClick={() => alert('Завантажується!')}>
+        Завантажити зображення
       </Button>
     </div>
   );
@@ -409,43 +409,43 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+Коли ви натискаєте на кнопку:
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React викликає обробник `onClick`, переданий до `<button>`.
+2. Той обробник, що визначений у `Button`, спрацьовує так:
+   * Викликає `e.stopPropagation()`, запобігаючи подальшому спливанню події.
+   * Викликає функцію `onClick`, яка є пропом, переданим із компонента `Toolbar`.
+3. Ця функція, що визначена у компоненті `Toolbar`, відображає відповідне для цієї кнопки сповіщення.
+4. Оскільки поширення було зупинено, обробник `onClick` батьківського `<div>` *не* виконується.
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+У результаті виклику `e.stopPropagation()` після натискання на кнопки тепер показується лише одне сповіщення (від `<button>`), а не два (від `<button>` та від `<div>` із батьківської панелі інструментів). Натискання на кнопку — це не те саме, що натискання на панель інструментів довкола, тому для цього UI розумно зупинити поширення.
 
 <DeepDive>
 
-#### Capture phase events {/*capture-phase-events*/}
+#### Події у фазі занурення {/*capture-phase-events*/}
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+У рідкісних випадках вам може знадобитися перехопити всі події для дочірніх елементах, *навіть якщо вони зупинили поширення*. Наприклад, можливо, ви хочете додавати кожен клік до аналітики незалежно від логіки поширення. Це можна зробити, додавши `Capture` у кінці назви події:
 
 ```js
-<div onClickCapture={() => { /* this runs first */ }}>
+<div onClickCapture={() => { /* цей код виконується спочатку */ }}>
   <button onClick={e => e.stopPropagation()} />
   <button onClick={e => e.stopPropagation()} />
 </div>
 ```
 
-Each event propagates in three phases: 
+Поширення кожної події складається із трьох фаз:
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. Вона рухається вниз, викликаючи всі обробники `onClickCapture` — занурення.
+2. Викликає обробник `onClick` елемента, на який натиснули.
+3. Вона рухається вгору, викликаючи всі обробники `onClick` — спливання.
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+Події у фазі занурення корисні для навігації (routers) чи аналітики, але ви, ймовірно, не будете використовувати їх безпосередньо у застосунку.
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### Передавання обробників як альтернатива поширенню {/*passing-handlers-as-alternative-to-propagation*/}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+Зверніть увагу, як цей обробник кліків виконує рядок коду, _а потім_ викликає проп `onClick` від батька:
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -460,22 +460,22 @@ function Button({ onClick, children }) {
 }
 ```
 
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+Ви також можете додати більше коду до цього обробника перед викликом батьківського обробника події `onClick`. Цей патерн надає *альтернативу* поширенню. Це дає змогу дочірньому компоненту обробляти подію, а також батьківському — вказувати деяку додаткову поведінку. На відміну від поширення, це не відбувається автоматично. Але перевага цього патерну полягає в тому, що ви можете чітко стежити за всім ланцюжком коду, який виконується у відповідь на якусь подію.
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+Якщо ви покладаєтеся на поширення і вам важко відстежити, які обробники виконуються та чому, спробуйте натомість цей підхід.
 
-### Preventing default behavior {/*preventing-default-behavior*/}
+### Запобігання стандартній поведінці {/*preventing-default-behavior*/}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+Для деяких подій у браузері існує відповідна стандартна поведінка. Наприклад, подія надсилання форми `<form>`, яка відбувається після натискання на кнопку всередині неї, стандартно перезавантажить всю сторінку:
 
 <Sandpack>
 
 ```js
 export default function Signup() {
   return (
-    <form onSubmit={() => alert('Submitting!')}>
+    <form onSubmit={() => alert('Надсилається!')}>
       <input />
-      <button>Send</button>
+      <button>Надіслати</button>
     </form>
   );
 }
@@ -487,7 +487,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+Ви можете викликати `e.preventDefault()` для об'єкта події, щоб цього не відбувалося:
 
 <Sandpack>
 
@@ -496,10 +496,10 @@ export default function Signup() {
   return (
     <form onSubmit={e => {
       e.preventDefault();
-      alert('Submitting!');
+      alert('Надсилається!');
     }}>
       <input />
-      <button>Send</button>
+      <button>Надіслати</button>
     </form>
   );
 }
@@ -511,28 +511,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+Не плутайте `e.stopPropagation()` і `e.preventDefault()`. Вони обидва корисні, але не пов'язані між собою:
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) зупиняє виконання обробників подій, доданих до тегів вище деревом.
+* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) запобігає стандартній поведінці браузера для кількох подій, які її мають.
 
-## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+## Чи можуть обробники подій мати побічні ефекти? {/*can-event-handlers-have-side-effects*/}
 
-Absolutely! Event handlers are the best place for side effects.
+Звісно! Обробники подій — найкраще місце для побічних ефектів (side effects).
 
-Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+На відміну від функцій рендерингу, обробники подій не обов'язково мають бути [чистими](/learn/keeping-components-pure), тому це чудове місце, щоб щось *змінити* — наприклад, змінити значення у полі введення у відповідь на друкування або змінити список у відповідь на натискання на кнопку. Однак для того, щоб змінити деяку інформацію, вам спочатку потрібен спосіб її зберігання. У React це можна зробити за допомогою [стану — пам'яті компонента.](/learn/state-a-components-memory) Ви дізнаєтеся про все це на наступній сторінці.
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* Ви можете обробляти події, передавши функцію як проп до елемента на зразок `<button>`.
+* Необхідно передавати обробники подій, **а не викликати їх!** `onClick={handleClick}`, а не `onClick={handleClick()}`.
+* Ви можете визначити функцію обробника подій окремо або всередині JSX.
+* Обробники подій визначені всередині компонента, тому вони можуть отримати доступ до пропсів.
+* Ви можете оголосити обробник події у батьківському елементі та передати його як проп дочірньому.
+* Ви можете визначити власні пропси обробників подій із назвами, що відповідають меті їхнього застосування.
+* Події поширюються (спливають) вгору. Викличте `e.stopPropagation()` для першого аргументу, щоб запобігти цьому.
+* Події можуть мати небажану стандартну поведінку браузера. Викличте `e.preventDefault()`, щоб запобігти цьому.
+* Явний виклик пропу обробника події в обробнику дочірнього компонента є хорошою альтернативою поширенню.
 
 </Recap>
 
@@ -540,9 +540,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-#### Fix an event handler {/*fix-an-event-handler*/}
+#### Виправте обробник події {/*fix-an-event-handler*/}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+Натискання цієї кнопки передбачає перемикання фону сторінки між білим і чорним кольорами. Однак нічого не відбувається, коли ви натискаєте на неї. Вирішіть проблему. (Не турбуйтеся про логіку всередині `handleClick` — ця частина в порядку.)
 
 <Sandpack>
 
@@ -559,7 +559,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick()}>
-      Toggle the lights
+      Перемкнути фон
     </button>
   );
 }
@@ -569,7 +569,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+Проблема полягає в тому, що `<button onClick={handleClick()}>` _викликає_ функцію `handleClick` під час рендерингу замість її _передавання_. Видалення виклику `()` ось так — `<button onClick={handleClick}>` — вирішує проблему:
 
 <Sandpack>
 
@@ -586,7 +586,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={handleClick}>
-      Toggle the lights
+      Перемкнути фон
     </button>
   );
 }
@@ -594,7 +594,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+Крім того, ви можете обернути виклик в іншу функцію, наприклад `<button onClick={() => handleClick()}>`:
 
 <Sandpack>
 
@@ -611,7 +611,7 @@ export default function LightSwitch() {
 
   return (
     <button onClick={() => handleClick()}>
-      Toggle the lights
+      Перемкнути фон
     </button>
   );
 }
@@ -621,11 +621,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Wire up the events {/*wire-up-the-events*/}
+#### Під'єднайте події {/*wire-up-the-events*/}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+Цей компонент `ColorSwitch` рендерить кнопку. Вона має змінювати колір сторінки. Під'єднайте її до пропу обробника події `onChangeColor`, який він отримує від батьківського елемента, щоб натискання кнопки змінювало колір.
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+Після цього зверніть увагу, що натискання кнопки також збільшує лічильник кліків сторінки. Ваш колега, який написав батьківський компонент, наполягає на тому, що `onChangeColor` не збільшує жодних лічильників. Що це таке відбувається? Виправте так, щоб натискання кнопки *лише* змінювало колір, а _не_ збільшувало лічильник.
 
 <Sandpack>
 
@@ -635,7 +635,7 @@ export default function ColorSwitch({
 }) {
   return (
     <button>
-      Change color
+      Змінити колір
     </button>
   );
 }
@@ -669,7 +669,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Кліків на сторінці: {clicks}</h2>
     </div>
   );
 }
@@ -679,9 +679,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+По-перше, вам потрібно додати обробник події, наприклад `<button onClick={onChangeColor}>`.
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+Однак це створює проблему збільшення лічильника. Якщо `onChangeColor` не робить цього, як наполягає ваш колега, тоді проблема полягає в тому, що ця подія поширюється вгору, і це робить якийсь обробник вище. Щоб вирішити цю проблему, потрібно зупинити поширення. Але не забувайте, що ви все одно повинні викликати `onChangeColor`.
 
 <Sandpack>
 
@@ -694,7 +694,7 @@ export default function ColorSwitch({
       e.stopPropagation();
       onChangeColor();
     }}>
-      Change color
+      Змінити колір
     </button>
   );
 }
@@ -728,7 +728,7 @@ export default function App() {
       <ColorSwitch onChangeColor={handleChangeColor} />
       <br />
       <br />
-      <h2>Clicks on the page: {clicks}</h2>
+      <h2>Кліків на сторінці: {clicks}</h2>
     </div>
   );
 }