diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md
index 61e4f4e2d..6984e133c 100644
--- a/src/content/learn/updating-arrays-in-state.md
+++ b/src/content/learn/updating-arrays-in-state.md
@@ -1,52 +1,52 @@
 ---
-title: Updating Arrays in State
+title: Оновлення масивів у стані
 ---
 
 <Intro>
 
-Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
+У JavaScript масиви є змінними, але потрібно розглядати їх як незмінні під час зберігання у стані. Як і з об'єктами, коли вам потрібно оновити масив, що зберігається в стані, слід створити новий (або зробити копію наявного), а потім використати цей новий масив під час задання стану.
 
 </Intro>
 
 <YouWillLearn>
 
-- How to add, remove, or change items in an array in React state
-- How to update an object inside of an array
-- How to make array copying less repetitive with Immer
+- Як додавати, видаляти або змінювати елементи масиву в стані React
+- Як оновити об'єкт всередині масиву
+- Як зробити копіювання масиву менш повторюваним за допомогою Immer
 
 </YouWillLearn>
 
-## Updating arrays without mutation {/*updating-arrays-without-mutation*/}
+## Оновлення масивів без мутації {/*updating-arrays-without-mutation*/}
 
-In JavaScript, arrays are just another kind of object. [Like with objects](/learn/updating-objects-in-state), **you should treat arrays in React state as read-only.** This means that you shouldn't reassign items inside an array like `arr[0] = 'bird'`, and you also shouldn't use methods that mutate the array, such as `push()` and `pop()`.
+У JavaScript масиви — це ще один вид об'єктів. [Як і з об'єктами](/learn/updating-objects-in-state), **потрібно розглядати масиви в стані React як доступні лише для читання.** Це означає, що не слід повторно присвоювати значення елементам усередині масиву, наприклад, `arr[0] = 'bird'`, а також використовувати методи, які мутують масив, як-от `push()` і `pop()`.
 
-Instead, every time you want to update an array, you'll want to pass a *new* array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods like `filter()` and `map()`. Then you can set your state to the resulting new array.
+Натомість кожного разу, коли хочете оновити масив, потрібно передати *новий* масив у функцію задання стану. Щоб зробити це, ви можете створити новий масив із вихідного у вашому стані, викликавши його немутаційні методи, як-от `filter()` і `map()`. Потім можете задати стан для нового отриманого масиву.
 
-Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:
+Ось довідкова таблиця загальних операцій із масивами. Маючи справу з масивами всередині стану React, вам потрібно буде уникати методів у лівій колонці, а натомість віддавати перевагу методам у правій:
 
-|           | avoid (mutates the array)           | prefer (returns a new array)                                        |
+|           | уникати (змінює масив)           | віддати перевагу (повертає новий масив)                                        |
 | --------- | ----------------------------------- | ------------------------------------------------------------------- |
-| adding    | `push`, `unshift`                   | `concat`, `[...arr]` spread syntax ([example](#adding-to-an-array)) |
-| removing  | `pop`, `shift`, `splice`            | `filter`, `slice` ([example](#removing-from-an-array))              |
-| replacing | `splice`, `arr[i] = ...` assignment | `map` ([example](#replacing-items-in-an-array))                     |
-| sorting   | `reverse`, `sort`                   | copy the array first ([example](#making-other-changes-to-an-array)) |
+| додавання    | `push`, `unshift`                   | `concat`, spread-синтаксис `[...arr]` ([приклад](#adding-to-an-array)) |
+| видалення  | `pop`, `shift`, `splice`            | `filter`, `slice` ([приклад](#removing-from-an-array))              |
+| заміна | `splice`, `arr[i] = ...` присвоєння | `map` ([приклад](#replacing-items-in-an-array))                     |
+| сортування   | `reverse`, `sort`                   | спочатку скопіюйте масив ([приклад](#making-other-changes-to-an-array)) |
 
-Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns.
+Крім того, ви можете [скористатися Immer](#write-concise-update-logic-with-immer), що дозволить використовувати методи з обох стовпців.
 
 <Pitfall>
 
-Unfortunately, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are named similarly but are very different:
+На жаль, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) та [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) мають схожі назви, але дуже відрізняються:
 
-* `slice` lets you copy an array or a part of it.
-* `splice` **mutates** the array (to insert or delete items).
+* `slice` дозволяє копіювати масив або його частину.
+* `splice` **змінює** масив (для вставлення або видалення елементів).
 
-In React, you will be using `slice` (no `p`!) a lot more often because you don't want to mutate objects or arrays in state. [Updating Objects](/learn/updating-objects-in-state) explains what mutation is and why it's not recommended for state.
+У React ви будете використовувати `slice` (без `p`!) набагато частіше, тому що не потрібно мутувати об'єкти чи масиви в стані. [Оновлення об'єктів](/learn/updating-objects-in-state) пояснює, що таке мутація та чому вона не рекомендована для стану.
 
 </Pitfall>
 
-### Adding to an array {/*adding-to-an-array*/}
+### Додавання до масиву {/*adding-to-an-array*/}
 
-`push()` will mutate an array, which you don't want:
+`push()` змінить масив, що вам не потрібно:
 
 <Sandpack>
 
@@ -61,7 +61,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Скульптори, які надихають:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -71,7 +71,7 @@ export default function List() {
           id: nextId++,
           name: name,
         });
-      }}>Add</button>
+      }}>Додати</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -88,18 +88,18 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [array spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals) syntax:
+Натомість створіть *новий* масив, який містить існуючі елементи *і* новий елемент у кінці. Це можна зробити кількома способами, але найпростішим є використання `...` — синтаксису [spread для масиву](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals):
 
 ```js
-setArtists( // Replace the state
-  [ // with a new array
-    ...artists, // that contains all the old items
-    { id: nextId++, name: name } // and one new item at the end
+setArtists( // Замінити стан
+  [ // новим масивом
+    ...artists, // який містить усі попередні елементи
+    { id: nextId++, name: name } // і новий елемент у кінці
   ]
 );
 ```
 
-Now it works correctly:
+Тепер все працює правильно:
 
 <Sandpack>
 
@@ -114,7 +114,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Скульптори, які надихають:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -124,7 +124,7 @@ export default function List() {
           ...artists,
           { id: nextId++, name: name }
         ]);
-      }}>Add</button>
+      }}>Додати</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -141,20 +141,20 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-The array spread syntax also lets you prepend an item by placing it *before* the original `...artists`:
+Синтаксис spread також дозволяє додавати елемент до початку, розміщуючи його *перед* оригінальним масивом `...artists`:
 
 ```js
 setArtists([
   { id: nextId++, name: name },
-  ...artists // Put old items at the end
+  ...artists // Покладіть попередні елементи в кінці
 ]);
 ```
 
-In this way, spread can do the job of both `push()` by adding to the end of an array and `unshift()` by adding to the beginning of an array. Try it in the sandbox above!
+Отже, поширення може виконувати роботу як `push()`, додаючи в кінець масиву, так і `unshift()`, додаючи до початку. Спробуйте це в пісочниці вище!
 
-### Removing from an array {/*removing-from-an-array*/}
+### Видалення з масиву {/*removing-from-an-array*/}
 
-The easiest way to remove an item from an array is to *filter it out*. In other words, you will produce a new array that will not contain that item. To do this, use the `filter` method, for example:
+Найпростіший спосіб видалити елемент із масиву — це *відфільтрувати його*. Іншими словами, створити новий масив, який не міститиме цей елемент. Для цього скористайтеся методом `filter`, наприклад:
 
 <Sandpack>
 
@@ -174,7 +174,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Скульптори, які надихають:</h1>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>
@@ -186,7 +186,7 @@ export default function List() {
                 )
               );
             }}>
-              Delete
+              Видалити
             </button>
           </li>
         ))}
@@ -198,7 +198,7 @@ export default function List() {
 
 </Sandpack>
 
-Click the "Delete" button a few times, and look at its click handler.
+Натисніть кнопку "Видалити" кілька разів і подивіться на її обробник клацання.
 
 ```js
 setArtists(
@@ -206,13 +206,13 @@ setArtists(
 );
 ```
 
-Here, `artists.filter(a => a.id !== artist.id)` means "create an array that consists of those `artists` whose IDs are different from `artist.id`". In other words, each artist's "Delete" button will filter _that_ artist out of the array, and then request a re-render with the resulting array. Note that `filter` does not modify the original array.
+Тут `artists.filter(a => a.id !== artist.id)` означає "створити масив, який складається з тих `artists`, ідентифікатори яких відрізняються від `artist.id`". Іншими словами, кнопка "Видалити" кожного скульптора відфільтровує _цього_ скульптора з масиву, а потім запитує повторний рендер з отриманим масивом. Зауважте, що `filter` не змінює вихідний масив.
 
-### Transforming an array {/*transforming-an-array*/}
+### Перетворення масиву {/*transforming-an-array*/}
 
-If you want to change some or all items of the array, you can use `map()` to create a **new** array. The function you will pass to `map` can decide what to do with each item, based on its data or its index (or both).
+Якщо потрібно змінити деякі або всі елементи масиву, можна скористатися `map()`, щоб створити **новий** масив. Функція, яку передасте `map`, може вирішити, що робити з кожним елементом на основі його даних або індексу (або обох).
 
-In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 50 pixels. It does this by producing a new array of data using `map()`:
+У цьому прикладі масив містить координати двох кіл і квадрата. Коли ви натискаєте кнопку, вона пересуває лише кола вниз на 50 пікселів. Це робиться через створення нового масиву даних за допомогою `map()`:
 
 <Sandpack>
 
@@ -233,24 +233,24 @@ export default function ShapeEditor() {
   function handleClick() {
     const nextShapes = shapes.map(shape => {
       if (shape.type === 'square') {
-        // No change
+        // Без змін
         return shape;
       } else {
-        // Return a new circle 50px below
+        // Повертає нове коло нижче на 50px
         return {
           ...shape,
           y: shape.y + 50,
         };
       }
     });
-    // Re-render with the new array
+    // Повторний рендер з новим масивом
     setShapes(nextShapes);
   }
 
   return (
     <>
       <button onClick={handleClick}>
-        Move circles down!
+        Перемістити кола вниз!
       </button>
       {shapes.map(shape => (
         <div
@@ -278,11 +278,11 @@ body { height: 300px; }
 
 </Sandpack>
 
-### Replacing items in an array {/*replacing-items-in-an-array*/}
+### Заміна елементів у масиві {/*replacing-items-in-an-array*/}
 
-It is particularly common to want to replace one or more items in an array. Assignments like `arr[0] = 'bird'` are mutating the original array, so instead you'll want to use `map` for this as well.
+Особливо часто потрібно замінити один або кілька елементів у масиві. Присвоєння на кшталт `arr[0] = 'bird'` мутують оригінальний масив, тому натомість ви також можете скористатися `map`.
 
-To replace an item, create a new array with `map`. Inside your `map` call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:
+Щоб замінити елемент, створіть новий масив за допомогою `map`. У виклику `map` ви маєте індекс елемента другим аргументом. Використовуйте його, щоб вирішити, повертати оригінальний елемент (перший аргумент) чи щось інше:
 
 <Sandpack>
 
@@ -301,10 +301,10 @@ export default function CounterList() {
   function handleIncrementClick(index) {
     const nextCounters = counters.map((c, i) => {
       if (i === index) {
-        // Increment the clicked counter
+        // Збільшити лічильник біля натиснутих клавіш
         return c + 1;
       } else {
-        // The rest haven't changed
+        // Решта не змінилися
         return c;
       }
     });
@@ -332,11 +332,11 @@ button { margin: 5px; }
 
 </Sandpack>
 
-### Inserting into an array {/*inserting-into-an-array*/}
+### Вставляння в масив {/*inserting-into-an-array*/}
 
-Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread syntax together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
+Іноді може знадобитися вставити елемент у певну позицію, яка не є ні на початку, ні в кінці. Для цього ви можете використовувати spread-синтаксис `...` разом із методом `slice()`. Метод `slice()` дозволяє вирізати "шматочок" масиву. Щоб вставити елемент, ви створюєте масив, який розподіляє фрагмент _перед_ точкою вставлення, потім новий елемент, а потім решту вихідного масиву.
 
-In this example, the Insert button always inserts at the index `1`:
+У цьому прикладі кнопка "Вставити" завжди вставляє елемент з індексом `1`:
 
 <Sandpack>
 
@@ -357,13 +357,13 @@ export default function List() {
   );
 
   function handleClick() {
-    const insertAt = 1; // Could be any index
+    const insertAt = 1; // Може бути будь-яким індексом
     const nextArtists = [
-      // Items before the insertion point:
+      // Елементи перед точкою вставлення:
       ...artists.slice(0, insertAt),
-      // New item:
+      // Новий елемент:
       { id: nextId++, name: name },
-      // Items after the insertion point:
+      // Елементи після точки вставлення:
       ...artists.slice(insertAt)
     ];
     setArtists(nextArtists);
@@ -372,13 +372,13 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>Скульптори, які надихають:</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
       />
       <button onClick={handleClick}>
-        Insert
+        Вставити
       </button>
       <ul>
         {artists.map(artist => (
@@ -396,13 +396,13 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-### Making other changes to an array {/*making-other-changes-to-an-array*/}
+### Внесення інших змін до масиву {/*making-other-changes-to-an-array*/}
 
-There are some things you can't do with the spread syntax and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
+Дещо неможливо зробити лише за допомогою синтаксису spread та методів, як-от `map()` і `filter()`, які не мутують масив. Наприклад, може знадобитися розмістити елементи масиву у зворотному напрямку або відсортувати їх. Методи JavaScript `reverse()` і `sort()` мутують оригінальний масив, тому не можна використовувати їх безпосередньо.
 
-**However, you can copy the array first, and then make changes to it.**
+**Однак можна спочатку зробити копію масиву, а потім внести в неї зміни.**
 
-For example:
+Наприклад:
 
 <Sandpack>
 
@@ -410,9 +410,9 @@ For example:
 import { useState } from 'react';
 
 const initialList = [
-  { id: 0, title: 'Big Bellies' },
-  { id: 1, title: 'Lunar Landscape' },
-  { id: 2, title: 'Terracotta Army' },
+  { id: 0, title: 'Великі животи' },
+  { id: 1, title: 'Місячний пейзаж' },
+  { id: 2, title: 'Теракотова армія' },
 ];
 
 export default function List() {
@@ -427,7 +427,7 @@ export default function List() {
   return (
     <>
       <button onClick={handleClick}>
-        Reverse
+        Змінити порядок
       </button>
       <ul>
         {list.map(artwork => (
@@ -441,25 +441,25 @@ export default function List() {
 
 </Sandpack>
 
-Here, you use the `[...list]` spread syntax to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
+Тут ви використовуєте spread-синтаксис `[...list]`, щоб спочатку створити копію вихідного масиву. Тепер, коли маєте копію, можете використовувати методи зміни, як-от `nextList.reverse()` або `nextList.sort()`, або навіть призначати окремі елементи за допомогою `nextList[0] = "something"`.
 
-However, **even if you copy an array, you can't mutate existing items _inside_ of it directly.** This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
+Однак, **навіть якщо скопіюєте масив, ви не зможете змінити існуючі елементи _всередині_ нього безпосередньо.** Це пояснюється тим, що копіювання неглибоке — новий масив міститиме ті самі елементи, що й оригінальний. Отже, якщо змінюєте об'єкт у скопійованому масиві, ви змінюєте наявний стан. Наприклад, такий код є проблемою.
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // Problem: mutates list[0]
+nextList[0].seen = true; // Проблема: мутація list[0]
 setList(nextList);
 ```
 
-Although `nextList` and `list` are two different arrays, **`nextList[0]` and `list[0]` point to the same object.** So by changing `nextList[0].seen`, you are also changing `list[0].seen`. This is a state mutation, which you should avoid! You can solve this issue in a similar way to [updating nested JavaScript objects](/learn/updating-objects-in-state#updating-a-nested-object)--by copying individual items you want to change instead of mutating them. Here's how.
+Хоча `nextList` і `list` — це два різні масиви, **`nextList[0]` і `list[0]` вказують на той самий об'єкт.** Отже, змінивши `nextList[0].seen`, ви також змінюєте `list[0].seen`. Це мутація стану, якої слід уникати! Цю проблему можна вирішити подібно до [оновлення вкладених об'єктів JavaScript](/learn/updating-objects-in-state#updating-a-nested-object) – скопіювавши окремі елементи, які потрібно змінити, а не видозмінювати їх. Ось як.
 
-## Updating objects inside arrays {/*updating-objects-inside-arrays*/}
+## Оновлення об'єктів всередині масивів {/*updating-objects-inside-arrays*/}
 
-Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
+Об'єкти _справді_ не розташовані "всередині" масивів. Вони можуть здаватися тими, що "всередині" коду, але кожен об'єкт у масиві є окремим значенням, на яке "вказує" масив. Ось чому потрібно бути обережним, змінюючи вкладені поля, як-от `list[0]`. Інші водночас можуть працювати з тим самим елементом масиву!
 
-**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
+**Під час оновлення вкладеного стану вам потрібно створити копії від точки оновлення і аж до верхнього рівня.** Давайте подивимося, як це робиться.
 
-In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
+У цьому прикладі два окремі списки мають однаковий початковий стан. Вони мають бути ізольованими, але через мутацію їхній стан випадково поділяється, і встановлення прапорця в одному списку впливає на інший:
 
 <Sandpack>
 
@@ -468,9 +468,9 @@ import { useState } from 'react';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+  { id: 0, title: 'Великі животи', seen: false },
+  { id: 1, title: 'Місячний пейзаж', seen: false },
+  { id: 2, title: 'Теракотова армія', seen: true },
 ];
 
 export default function BucketList() {
@@ -499,12 +499,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Мистецький список</h1>
+      <h2>Мій список для перегляду:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Ваш список для перегляду:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -539,34 +539,34 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-The problem is in code like this:
+Проблема полягає в цьому коді:
 
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // Problem: mutates an existing item
+artwork.seen = nextSeen; // Проблема: мутація існуючого елементу
 setMyList(myNextList);
 ```
 
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourList`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+Хоча сам масив `myNextList` є новим, його *елементи* ті самі, що і в оригінальному масиві `myList`. Отже, зміна `artwork.seen` змінює *оригінальний* елемент. Цей елемент також є у `yourList`, що спричиняє помилку. Про такі помилки важко здогадатися, але, на щастя, вони зникають, якщо ви уникаєте зміни стану.
 
-**You can use `map` to substitute an old item with its updated version without mutation.**
+**Ви можете скористатися `map`, щоб замінити попередній елемент його оновленою версією без мутації.**
 
 ```js
 setMyList(myList.map(artwork => {
   if (artwork.id === artworkId) {
-    // Create a *new* object with changes
+    // Створення *нового* зміненого об'єкта
     return { ...artwork, seen: nextSeen };
   } else {
-    // No changes
+    // Без змін
     return artwork;
   }
 }));
 ```
 
-Here, `...` is the object spread syntax used to [create a copy of an object.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
+Тут `...` — синтаксис spread об'єкта, який використовується для [створення копії об'єкта.](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax)
 
-With this approach, none of the existing state items are being mutated, and the bug is fixed:
+За допомогою цього підходу жоден із існуючих елементів стану не змінюється, і помилку виправлено:
 
 <Sandpack>
 
@@ -575,9 +575,9 @@ import { useState } from 'react';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+  { id: 0, title: 'Великі животи', seen: false },
+  { id: 1, title: 'Місячний пейзаж', seen: false },
+  { id: 2, title: 'Теракотова армія', seen: true },
 ];
 
 export default function BucketList() {
@@ -589,10 +589,10 @@ export default function BucketList() {
   function handleToggleMyList(artworkId, nextSeen) {
     setMyList(myList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // Створення *нового* зміненого об'єкта
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // Без змін
         return artwork;
       }
     }));
@@ -601,10 +601,10 @@ export default function BucketList() {
   function handleToggleYourList(artworkId, nextSeen) {
     setYourList(yourList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // Створення *нового* зміненого об'єкта
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // Без змін
         return artwork;
       }
     }));
@@ -612,12 +612,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Мистецький список</h1>
+      <h2>Мій список для перегляду:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Ваш список для перегляду:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -652,16 +652,16 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-In general, **you should only mutate objects that you have just created.** If you were inserting a *new* artwork, you could mutate it, but if you're dealing with something that's already in state, you need to make a copy.
+Загалом, **ви повинні змінювати лише об'єкти, які щойно створили.** Якщо ви вставляєте *новий* елемент, можете його змінити, але якщо маєте справу з чимось, що вже є в стані, потрібно зробити копію.
 
-### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/}
+### Пишемо стислу логіку оновлення за допомогою Immer {/*write-concise-update-logic-with-immer*/}
 
-Updating nested arrays without mutation can get a little bit repetitive. [Just as with objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+Оновлення вкладених масивів без мутації може приводити до деяких повторень. [Так само, як і з об'єктами](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- Generally, you shouldn't need to update state more than a couple of levels deep. If your state objects are very deep, you might want to [restructure them differently](/learn/choosing-the-state-structure#avoid-deeply-nested-state) so that they are flat.
-- If you don't want to change your state structure, you might prefer to use [Immer](https://github.com/immerjs/use-immer), which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.
+- Як правило, вам не потрібно оновлювати стан більш ніж на кілька рівнів у глибину. Якщо об'єкти стану дуже глибокі, можете [реструктурувати їх](/learn/choosing-the-state-structure#avoid-deeply-nested-state) щоб вони були більш плоскими.
+- Якщо ви не хочете змінювати структуру стану, можете віддати перевагу [Immer](https://github.com/immerjs/use-immer), який дає змогу писати за допомогою зручного, але мутаційного синтаксису та піклується про створення копії замість вас.
 
-Here is the Art Bucket List example rewritten with Immer:
+Ось попередній приклад, написаний за допомогою Immer:
 
 <Sandpack>
 
@@ -671,9 +671,9 @@ import { useImmer } from 'use-immer';
 
 let nextId = 3;
 const initialList = [
-  { id: 0, title: 'Big Bellies', seen: false },
-  { id: 1, title: 'Lunar Landscape', seen: false },
-  { id: 2, title: 'Terracotta Army', seen: true },
+  { id: 0, title: 'Великі животи', seen: false },
+  { id: 1, title: 'Місячний пейзаж', seen: false },
+  { id: 2, title: 'Теракотова армія', seen: true },
 ];
 
 export default function BucketList() {
@@ -704,12 +704,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>Мистецький список</h1>
+      <h2>Мій список для перегляду:</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>Ваш список для перегляду:</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -762,7 +762,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-Note how with Immer, **mutation like `artwork.seen = nextSeen` is now okay:**
+Зверніть увагу, що з використанням Immer, **мутація, як-от `artwork.seen = nextSeen` тепер задовільна:**
 
 ```js
 updateMyTodos(draft => {
@@ -771,17 +771,17 @@ updateMyTodos(draft => {
 });
 ```
 
-This is because you're not mutating the _original_ state, but you're mutating a special `draft` object provided by Immer. Similarly, you can apply mutating methods like `push()` and `pop()` to the content of the `draft`.
+Це тому, що ви мутуєте не _вихідний_ стан, а спеціальну чорнетку — об'єкт `draft` з Immer. Аналогічно, можете застосувати такі методи мутації, як `push()` та `pop()`, до змісту `draft`.
 
-Behind the scenes, Immer always constructs the next state from scratch according to the changes that you've done to the `draft`. This keeps your event handlers very concise without ever mutating state.
+Під капотом Immer завжди будує наступний стан з нуля відповідно до змін, які зроблено для `draft`-об'єкта. Це підтримує обробники подій дуже стислими, не мутуючи стан.
 
 <Recap>
 
-- You can put arrays into state, but you can't change them.
-- Instead of mutating an array, create a *new* version of it, and update the state to it.
-- You can use the `[...arr, newItem]` array spread syntax to create arrays with new items.
-- You can use `filter()` and `map()` to create new arrays with filtered or transformed items.
-- You can use Immer to keep your code concise.
+- Можна вкласти масиви в стан, але не можна їх змінювати.
+- Замість мутування масиву створіть його *нову* версію та оновіть стан.
+- Можете скористатися `[...arr, newItem]` spread-синтаксисом для створення масивів із новими елементами.
+- Можете використовувати `filter()` та `map()` для створення нових масивів із відфільтрованими та перетвореними елементами.
+- Можете скористатися Immer для стислості коду.
 
 </Recap>
 
@@ -789,9 +789,9 @@ Behind the scenes, Immer always constructs the next state from scratch according
 
 <Challenges>
 
-#### Update an item in the shopping cart {/*update-an-item-in-the-shopping-cart*/}
+#### Оновіть товар у кошику {/*update-an-item-in-the-shopping-cart*/}
 
-Fill in the `handleIncreaseClick` logic so that pressing "+" increases the corresponding number:
+Напишіть логіку в методі `handleIncreaseClick` так, щоб натискання "+" збільшувало відповідне число:
 
 <Sandpack>
 
@@ -800,15 +800,15 @@ import { useState } from 'react';
 
 const initialProducts = [{
   id: 0,
-  name: 'Baklava',
+  name: 'Пахлава',
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Сир',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Спагеті',
   count: 2,
 }];
 
@@ -849,7 +849,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can use the `map` function to create a new array, and then use the `...` object spread syntax to create a copy of the changed object for the new array:
+Можна скористатися функцією `map` щоб створити новий масив, а потім `...` синтаксисом spread щоб створити копію зміненого об'єкта у новому масиві:
 
 <Sandpack>
 
@@ -858,15 +858,15 @@ import { useState } from 'react';
 
 const initialProducts = [{
   id: 0,
-  name: 'Baklava',
+  name: 'Пахлава',
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Сир',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Спагеті',
   count: 2,
 }];
 
@@ -916,9 +916,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Remove an item from the shopping cart {/*remove-an-item-from-the-shopping-cart*/}
+#### Видаліть товар із кошика {/*remove-an-item-from-the-shopping-cart*/}
 
-This shopping cart has a working "+" button, but the "–" button doesn't do anything. You need to add an event handler to it so that pressing it decreases the `count` of the corresponding product. If you press "–" when the count is 1, the product should automatically get removed from the cart. Make sure it never shows 0.
+Цей кошик має робочу кнопку "+", але кнопка "–" нічого не робить. Вам потрібно додати обробник події, який дасть змогу зменшувати `count` для відповідного товару. Коли count дорівнює 1, після натискання "–" товар повинен автоматично видалятись із кошика. Переконайтесь, що 0 не відображено.
 
 <Sandpack>
 
@@ -927,15 +927,15 @@ import { useState } from 'react';
 
 const initialProducts = [{
   id: 0,
-  name: 'Baklava',
+  name: 'Пахлава',
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Сир',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Спагеті',
   count: 2,
 }];
 
@@ -988,7 +988,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can first use `map` to produce a new array, and then `filter` to remove products with a `count` set to `0`:
+Скористайтеся спочатку `map`, щоб створити новий масив, а потім `filter`, щоб видалилити товари, якщо `count` дорівнює `0`:
 
 <Sandpack>
 
@@ -997,15 +997,15 @@ import { useState } from 'react';
 
 const initialProducts = [{
   id: 0,
-  name: 'Baklava',
+  name: 'Пахлава',
   count: 1,
 }, {
   id: 1,
-  name: 'Cheese',
+  name: 'Сир',
   count: 5,
 }, {
   id: 2,
-  name: 'Spaghetti',
+  name: 'Спагеті',
   count: 2,
 }];
 
@@ -1077,9 +1077,9 @@ button { margin: 5px; }
 
 </Solution>
 
-#### Fix the mutations using non-mutative methods {/*fix-the-mutations-using-non-mutative-methods*/}
+#### Виправте мутації за допомогою методів, що не мутують значення {/*fix-the-mutations-using-non-mutative-methods*/}
 
-In this example, all of the event handlers in `App.js` use mutation. As a result, editing and deleting todos doesn't work. Rewrite `handleAddTodo`, `handleChangeTodo`, and `handleDeleteTodo` to use the non-mutative methods:
+У цьому прикладі всі обробники подій в `App.js` використовують мутацію. Як результат, редагування та видалення задач не працює. Перепишіть `handleAddTodo`, `handleChangeTodo`, та `handleDeleteTodo` з використанням методів, що не мутують значення:
 
 <Sandpack>
 
@@ -1090,9 +1090,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Купити молоко', done: true },
+  { id: 1, title: 'З\'їсти тако', done: false },
+  { id: 2, title: 'Заварити чай', done: false },
 ];
 
 export default function TaskApp() {
@@ -1146,14 +1146,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Додати задачу"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Додати</button>
     </>
   )
 }
@@ -1197,7 +1197,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Зберегти
         </button>
       </>
     );
@@ -1206,7 +1206,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Редагувати
         </button>
       </>
     );
@@ -1225,7 +1225,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Видалити
       </button>
     </label>
   );
@@ -1242,7 +1242,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`, you can create a new array with `map`. In `handleDeleteTodo`, you can create a new array with `filter`. Now the list works correctly:
+У методі `handleAddTodo` можна скористатися синтаксисом spread. У `handleChangeTodo` можна створити новий масив за допомогою `map`. У `handleDeleteTodo` можна створити новий масив за допомогою `filter`. Тепер список працює як слід:
 
 <Sandpack>
 
@@ -1253,9 +1253,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Купити молоко', done: true },
+  { id: 1, title: 'З\'їсти тако', done: false },
+  { id: 2, title: 'Заварити чай', done: false },
 ];
 
 export default function TaskApp() {
@@ -1313,14 +1313,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Додати задачу"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Додати</button>
     </>
   )
 }
@@ -1364,7 +1364,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Зберегти
         </button>
       </>
     );
@@ -1373,7 +1373,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Редагувати
         </button>
       </>
     );
@@ -1392,7 +1392,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Видалити
       </button>
     </label>
   );
@@ -1410,9 +1410,9 @@ ul, li { margin: 0; padding: 0; }
 </Solution>
 
 
-#### Fix the mutations using Immer {/*fix-the-mutations-using-immer*/}
+#### Виправлення мутацій за допомогою Immer {/*fix-the-mutations-using-immer*/}
 
-This is the same example as in the previous challenge. This time, fix the mutations by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `todos` state variable to use it.
+Це той самий приклад, що і в попередньому завданні. Але цього разу, треба виправити мутації за допомогою Immer. Для зручності, `useImmer` вже імпортовано, тому вам потрібно змінити стан змінної `todos`, щоб скористатися ним.
 
 <Sandpack>
 
@@ -1424,9 +1424,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Купити молоко', done: true },
+  { id: 1, title: 'З\'їсти тако', done: false },
+  { id: 2, title: 'Заварити чай', done: false },
 ];
 
 export default function TaskApp() {
@@ -1480,14 +1480,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Додати задачу"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Додати</button>
     </>
   )
 }
@@ -1531,7 +1531,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Зберегти
         </button>
       </>
     );
@@ -1540,7 +1540,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Редагувати
         </button>
       </>
     );
@@ -1559,7 +1559,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Видалити
       </button>
     </label>
   );
@@ -1594,7 +1594,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-With Immer, you can write code in the mutative fashion, as long as you're only mutating parts of the `draft` that Immer gives you. Here, all mutations are performed on the `draft` so the code works:
+За допомогою Immer ви можете писати код із мутаціями, поки мутуєте тільки частини чернетки `draft`, яку надає вам Immer. Тут всі мутації відбуваються лише з `draft`-об'єктом, тому код працює:
 
 <Sandpack>
 
@@ -1606,9 +1606,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Купити молоко', done: true },
+  { id: 1, title: 'З\'їсти тако', done: false },
+  { id: 2, title: 'Заварити чай', done: false },
 ];
 
 export default function TaskApp() {
@@ -1668,14 +1668,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Додати задачу"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Додати</button>
     </>
   )
 }
@@ -1719,7 +1719,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Зберегти
         </button>
       </>
     );
@@ -1728,7 +1728,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Редагувати
         </button>
       </>
     );
@@ -1747,7 +1747,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Видалити
       </button>
     </label>
   );
@@ -1780,9 +1780,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can also mix and match the mutative and non-mutative approaches with Immer.
+З Immer також можливо змішувати та поєднувати підходи з мутаціями та без них.
 
-For example, in this version `handleAddTodo` is implemented by mutating the Immer `draft`, while `handleChangeTodo` and `handleDeleteTodo` use the non-mutative `map` and `filter` methods:
+Наприклад, у цій версії `handleAddTodo` реалізований із мутацією `draft`-об'єкта з Immer, а `handleChangeTodo` і `handleDeleteTodo` використовують методи `map` та `filter`, що не мутують значення:
 
 <Sandpack>
 
@@ -1794,9 +1794,9 @@ import TaskList from './TaskList.js';
 
 let nextId = 3;
 const initialTodos = [
-  { id: 0, title: 'Buy milk', done: true },
-  { id: 1, title: 'Eat tacos', done: false },
-  { id: 2, title: 'Brew tea', done: false },
+  { id: 0, title: 'Купити молоко', done: true },
+  { id: 1, title: 'З\'їсти тако', done: false },
+  { id: 2, title: 'Заварити чай', done: false },
 ];
 
 export default function TaskApp() {
@@ -1853,14 +1853,14 @@ export default function AddTodo({ onAddTodo }) {
   return (
     <>
       <input
-        placeholder="Add todo"
+        placeholder="Додати задачу"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>Додати</button>
     </>
   )
 }
@@ -1904,7 +1904,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          Зберегти
         </button>
       </>
     );
@@ -1913,7 +1913,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          Редагувати
         </button>
       </>
     );
@@ -1932,7 +1932,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        Видалити
       </button>
     </label>
   );
@@ -1965,7 +1965,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-With Immer, you can pick the style that feels the most natural for each separate case.
+Використовуючи Immer, можна обрати стиль, який найбільше підходить до кожного конкретного випадку.
 
 </Solution>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 331c230a9..88e87f9b9 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -128,7 +128,7 @@
           "path": "/learn/updating-objects-in-state"
         },
         {
-          "title": "Updating Arrays in State",
+          "title": "Оновлення масивів у стані",
           "path": "/learn/updating-arrays-in-state"
         }
       ]