From aa361527c283ced3f9ce045a4d15a81e36f679df Mon Sep 17 00:00:00 2001
From: Dmytro <hrab.dmytrii@gmail.com>
Date: Sun, 5 Oct 2025 18:45:50 +0200
Subject: [PATCH] feat: translate preserving-and-resetting-state page

---
 .../learn/preserving-and-resetting-state.md   | 438 +++++++++---------
 src/sidebarLearn.json                         |   2 +-
 2 files changed, 220 insertions(+), 220 deletions(-)

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index d35071845..67b142996 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1,28 +1,28 @@
 ---
-title: Preserving and Resetting State
+title: Збереження та скидання стану
 ---
 
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+Стан ізольований між компонентами. React відстежує, який стан належить якому компоненту, виходячи з їх місця в дереві інтерфейсу користувача. Ви можете керувати тим, коли зберігати стан, а коли скидати його між рендерами.
 
 </Intro>
 
 <YouWillLearn>
 
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* Коли React зберігає або скидає стан
+* Як примусити React скинути стан компоненти
+* Як ключі та типи впливають на збереження стану 
 
 </YouWillLearn>
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## Стан прив'язаний до позиції у дереві рендерингу {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React будує [дерева рендерингу](learn/understanding-your-ui-as-a-tree#the-render-tree) для структури компонентів у вашому інтерфейсі.
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+Коли ви надаєте компоненту стан, ви можете подумати, що стан "живе" всередині компонента. Але насправді стан зберігається всередині React. React пов'язує кожен фрагмент стану, який він утримує, з відповідним компонентом, по тому де цей компонент знаходиться в дереві рендерингу.
 
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+В даному прикладі використовується тільки один JSX тег `<Counter />`, але він рендериться в двох різних позиціях.
 
 <Sandpack>
 
@@ -56,7 +56,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -70,7 +70,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -86,23 +86,23 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree:    
+Ось як вони відображаються у вигляді дерева:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Кожний дочірній компонент названий 'Counter' і обидва містять бульбашку стану з назвою 'count' із значенням 0.">
 
-React tree
+React дерево
 
 </Diagram>
 
 </DiagramGroup>
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**Це два окремі лічильника, оскільки кожен із них рендериться на своїй позиції в дереві.**  Зазвичай вам не потрібно думати про ці позиції щоб використовувати React, але розуміння того, як це працює, може бути корисним.
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+В React, кожен компонент на екрані має повністю ізольований стан. Для прикладу, якщо ви рендерите два компоненти `Counter` поруч, кожен з них отримає свої власні, незалежні стани `score` та `hover`.
 
-Try clicking both counters and notice they don't affect each other:
+Спробуйте натиснути на обидва лічильника і ви помітите, що вони не впливають один на одного:
 
 <Sandpack>
 
@@ -135,7 +135,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -144,7 +144,7 @@ function Counter() {
 
 ```css
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -160,21 +160,21 @@ function Counter() {
 
 </Sandpack>
 
-As you can see, when one counter is updated, only the state for that component is updated:
+Як ви можете бачити, коли один лічильник оновлюється, тільки стан тієї компоненти оновлюється: 
 
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+<Diagram name="preserving_state_increment" height={248} width={441} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Лівий нащадок має назву 'Counter' та містить бульбашку стану з назвою 'count' із значенням 0. Правий нащадок називається 'Counter' та містить бульбашку стану з назвою 'count' із значенням 1. Бульбашка стану правого нащадка підсвічена жовтим, щоб показати, що його значення було оновлено.">
 
-Updating state
+Оновлення стану
 
 </Diagram>
 
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+React зберігатиме цей стан доти, доки ви рендерите той самий компонент у тій самій позиції в дереві. Щоб побачити це, збільште обидва лічильника, потім видаліть другий компонент, знявши галочку "Рендерити другий лічильник", а потім додайте його назад, поставивши галочку знову:
 
 <Sandpack>
 
@@ -195,7 +195,7 @@ export default function App() {
             setShowB(e.target.checked)
           }}
         />
-        Render the second counter
+        Рендерити другий лічильник
       </label>
     </div>
   );
@@ -218,7 +218,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -232,7 +232,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -248,35 +248,35 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+Зверніть увагу, що як тільки ви зупиняєте рендеринг другого лічильника, його стан повністю зникає. Це тому, що коли React видаляє компонент, він знищує його стан.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Лівий нащадок має назву 'Counter' та містить бульбашку стану з назвою 'count' із значенням 0. Правий нащадок відсутній, проте на його місці знаходиться жовта піктограма 'пуф', яка виділяє компонент, що видалився із дерева.">
 
-Deleting a component
+Видалення компонента
 
 </Diagram>
 
 </DiagramGroup>
 
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+Коли ви вибираєте "Рендерити другий лічильник", другий `Counter` і його стан ініціалізуються з нуля (`рахунок = 0`) і додаються до DOM.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Лівий нащадок має назву 'Counter' та містить бульбашку стану з назвою 'count' із значенням 0. Правий нащадок має назву 'Counter' та містить бульбашку стану з назвою 'count' із значенням 0. Весь правий дочірній вузол виділено жовтим, що вказує на те, що він був добавлений до дерева.">
 
-Adding a component
+Додавання компонента
 
 </Diagram>
 
 </DiagramGroup>
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**React зберігає стан компоненти до тих пір, поки компонент рендериться на своєму місці в дереві інтерфейсу користувача.** Якщо його буде видалено, або на тому ж місці буде відрендерено інший компонент, React очистить його стейт.
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## Той самий компонент у тій самій позиції зберігає стан {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+У цьому прикладі є два різних `<Counter />` теги:
 
 <Sandpack>
 
@@ -300,7 +300,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Використати вишукану стилізацію
       </label>
     </div>
   );
@@ -326,7 +326,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -340,7 +340,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -361,24 +361,24 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+Коли ви встановлюєте або знімаєте прапорець, стан лічильника не обнуляється. Не залежно від того, чи `isFancy` є `true` або `false`, у вас завжди є `<Counter />` як перший дочірній елемент `div`, що повертається з кореневого компонента `App`.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="Діаграма з двома секціями, розділеними стрілкою, що переходить між ними. Кожна секція містить макет компонентів з батьківським компонентом, позначеним як 'App', що містить бульбашку стану, позначену як isFancy. Цей компонент має одного дочірнього елемента з назвою 'div', що створює бульбашку пропсів, яка містить isFancy (виділено фіолетовим кольором), що передається єдиному дочірньому елементу. Останній нащадок, що має назву 'Counter' і містить бульбашку станку з назвою 'count' та значенням 3 на обох діаграмах. У лівій частині діаграми нічого не виділено, а значення батьківського isFancy дорівнює false. У правій частині діаграми, значення батьківського стану isFancy змінилося на true і він виділений жовтим, так само як і бульбашка пропсів нижче, яка також змінила своє значення isFancy на true.">
 
-Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+Оновлення стану `App` не обнуляє `Counter`, оскільки `Counter` залишається на тій самій позиції
 
 </Diagram>
 
 </DiagramGroup>
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+Це той самий компонент на тій самій позиції, отже з точки зору React, це той самий лічильник.
 
 <Pitfall>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+Пам'ятайте, що **це позиція в дереві інтерфейсу користувача — не в JSX-розмітці — для React це важливо!** Цей компонент має два `return` пункти з різними `<Counter />` JSX-тегами в середині та зовні `if`:
 
 <Sandpack>
 
@@ -399,7 +399,7 @@ export default function App() {
               setIsFancy(e.target.checked)
             }}
           />
-          Use fancy styling
+          Використати вишукану стилізацію
         </label>
       </div>
     );
@@ -415,7 +415,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Використати вишукану стилізацію
       </label>
     </div>
   );
@@ -441,7 +441,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -455,7 +455,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -476,15 +476,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return.
+Ви можете очікувати, що стан буде обнулено, коли ви поставите галочку, але цього не станеться! Це тому, що **обидва теги `<Counter />` рендеряться на тій самій позиції.** React не знає, де ви розміщуєте умови у вашій функції. Все, що він "бачить" — це дерево, що ви повертаєте.
 
-In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+В обох випадках, `App` компонент повертає `<div>` із `<Counter />` як першим дочірнім елементом. Для React ці два лічильника мають однакову "адресу": перший нащадок першого нащадка кореня. Ось як React зіставляє їх між попереднім і наступним рендерингом, незалежно від того, як ви структуруєте свою логіку.
 
 </Pitfall>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## Різні компоненти на тій самій позиції скидають стан {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+В цьому прикладі встановлення прапорця замінить `<Counter>` на `<p>`:
 
 <Sandpack>
 
@@ -496,7 +496,7 @@ export default function App() {
   return (
     <div>
       {isPaused ? (
-        <p>See you later!</p> 
+        <p>Побачимось пізніше!</p> 
       ) : (
         <Counter /> 
       )}
@@ -508,7 +508,7 @@ export default function App() {
             setIsPaused(e.target.checked)
           }}
         />
-        Take a break
+        Зробіть перерву
       </label>
     </div>
   );
@@ -531,7 +531,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -545,7 +545,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -561,13 +561,13 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+Тут, ви переключаєте між _різними_ типами компонент на одній позиції. Початково перший дочірній елемент `<div>` містив `Counter`. Але коли ви замінили його на `p`, React видалив `Counter` з дерева інтерфейсу та знищив його стан.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить React компонент названий 'div' з єдиним дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 3. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'poof'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'p', який виділено жовтим.">
 
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+Коли `Counter` змінюється на `p`, то `Counter` видалено та `p` добавлено
 
 </Diagram>
 
@@ -575,15 +575,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить React компонент названий 'p'. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'poof'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 0, що підсвічено жовтим.">
 
-When switching back, the `p` is deleted and the `Counter` is added
+Коли перемикаємо назад, `p` видалено та `Counter` додано
 
 </Diagram>
 
 </DiagramGroup>
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+Крім того, **коли ви рендерите інший компонент у тому самому місці, це скидає стан усього його піддерева.** Щоб побачити, як це працює, збільште лічильник і потім встановіть прапорець:
 
 <Sandpack>
 
@@ -611,7 +611,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Використати вишукану стилізацію
       </label>
     </div>
   );
@@ -637,7 +637,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -651,7 +651,7 @@ label {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -672,13 +672,13 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+Стан лічильника скидається коли ви натискаєте на прапорець. Хоча ви рендерите `Counter`, перший дочірній елемент `div` змінюється з `div` на `section`. Коли дочірній елемент `div` було видалено з DOM, все дерево під ним (включаючи `Counter` та його стан) було також знищено.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить React компонент названий 'div' з єдиним дочірнім елементом названим 'section', який має єдиний дочірній елемент названий 'Counter', що містить бульбашковий стан названий 'count' із значенням 3. Центральна секція має той самий батьківський 'div' але дочірні компоненти тепер видалені, на що вказує жовте зображення 'poof'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'div', що підсвічено жовтим, також із новим дочірнім елементом названим 'Counter' що містить бульбашковий стан названий 'count' із значенням 0, все підсвічено жовтим.">
 
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+Коли `section` змінюється на `div`, тоді `section` видаляється і новий `div` додається
 
 </Diagram>
 
@@ -686,21 +686,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить React компонент названий 'div' з єдиним дочірнім елементом названим 'div', який має єдиний дочірній елемент названий 'Counter', що містить бульбашковий стан названий 'count' із значенням 0. Центральна секція має той самий батьківський 'div' але дочірні компоненти тепер видалені, на що вказує жовте зображення 'poof'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'section', що підсвічено жовтим, також із новим дочірнім елементом названим 'Counter' що містить бульбашковий стан названий 'count' із значенням 0, все підсвічено жовтим.">
 
-When switching back, the `div` is deleted and the new `section` is added
+При перемиканні назад, `div` видаляється і нова `section` додається
 
 </Diagram>
 
 </DiagramGroup>
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+Як правила, **якщо ви хочете зберегти стан між повторними рендерами, структура вашого дерева повинна "збігатися"** від одного рендера до іншого. Якщо структура відрізняється, стан знищується, оскільки React знищує стан, коли видаляє компонент із дерева.
 
 <Pitfall>
 
-This is why you should not nest component function definitions.
+Ось чому вам не варто вкладати визначення функційних компонент.
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+Тут, `MyTextField` функційний компонент визначено *всередині* `MyComponent`:
 
 <Sandpack>
 
@@ -726,7 +726,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>Натиснуто {counter} разів</button>
     </>
   );
 }
@@ -735,13 +735,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+Кожного разу, коли ви натискаєте кнопку, стан введення зникає! Це відбувається тому, що *інша* `MyTextField` функція створюється на кожен рендер `MyComponent`. Ви рендерите *інший* компонент у тому самому місці, тому React скидає весь стан нижче. Це призводить до проблем та проблем із продуктивністю. Щоб уникнути цієї проблеми **завжди оголошуйте функційні компоненти на найвищому рівні і не вкладайте їхнє визначення.**
 
 </Pitfall>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## Скидання стану в тому самому місці {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+За замовчуванням, React зберігає стан компонента, поки він залишається на тому самому місці. Зазвичай, це саме те, що ви хочете, тому це має сенс як поведінка за замовчуванням. Але інколи вам може знадобитися скинути стан компонента. Розглянемо цей додаток, який дозволяє двом гравцям відстежувати свої результати під час кожного ходу:
 
 <Sandpack>
 
@@ -753,14 +753,14 @@ export default function Scoreboard() {
   return (
     <div>
       {isPlayerA ? (
-        <Counter person="Taylor" />
+        <Counter person="Тайлера" />
       ) : (
-        <Counter person="Sarah" />
+        <Counter person="Сари" />
       )}
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Наступний гравець!
       </button>
     </div>
   );
@@ -781,9 +781,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Рахунок {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -796,7 +796,7 @@ h1 {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -811,19 +811,19 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+Зараз, коли ви змінюєте гравця, рахунок зберігається. Обидва `Counter` з'являються на одній і тій самій позиції, тому React сприймає їх як *один і той самий* `Counter`, у якого просто змінився проп `person`.
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+Але концептуально в цьому застосунку вони повинні бути двома окремими лічильниками. Вони можуть відображатися на одному й тому ж місці в інтерфейсі користувача, але один з них є лічильником для Тейлора, а інший — лічильником для Сари.
 
-There are two ways to reset state when switching between them:
+Є два способи скинути стан при перемиканні між ними:
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. Рендерити компоненти на різних позиціях
+2. Дати кожному компоненту явну ідентичність за допомогою `key`
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### Спосіб 1: Рендерити компонент в різних місцях {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+Якщо ви хочете, щоб ці два `Counter`, були незалежними, вам потрібно рендерити їх в двох різних позиціях:
 
 <Sandpack>
 
@@ -835,15 +835,15 @@ export default function Scoreboard() {
   return (
     <div>
       {isPlayerA &&
-        <Counter person="Taylor" />
+        <Counter person="Тайлера" />
       }
       {!isPlayerA &&
-        <Counter person="Sarah" />
+        <Counter person="Сари" />
       }
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Наступний гравець!
       </button>
     </div>
   );
@@ -864,9 +864,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Рахунок {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -879,7 +879,7 @@ h1 {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -894,42 +894,42 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* Спочатку `isPlayerA` дорівнює `true`. Тому перша позиція містить стан `Counter`, а друга — порожня.
+* Коли ви натискаєте кнопку "Наступний гравець", перша позиція очищується, а друга тепер містить `Counter`.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Діаграма з деревом React компонент. Батько названий 'Scoreboard' із бульбашковим станом названим isPlayerA із значенням 'true'. Єдиний дочірній елемент, розташований ліворуч, названий Counter із бульбашковим станом названим 'count' із значенням 0. Вся ліва частина дочірніх елементів підсвічена жовтим, що вказує на те, що вона була додана.">
 
-Initial state
+Початковий стан
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Діаграма з деревом React компонент. Батько названий 'Scoreboard' із бульбашковим станом названим isPlayerA із значенням 'false'. Бульбашковий стан підсвічено жовтим, що вказує, на його зміну. Лівий дочірній елемент змінено на жовте 'poof' зображення, що вказує на те, що воно було видалено, а праворуч появився новий дочірній елемент, що підсвічено жовтим, що вказує на те, що його було додано. Новий дочірній елемент названо 'Counter' та містить бульбашковий стан названий 'count' із значенням 0.">
 
-Clicking "next"
+Натискання "наступний"
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Діаграма з деревом React компонент. Батько названий 'Scoreboard' із бульбашковим станом названим isPlayerA із значенням 'true'. Бульбашковий стан підсвічено жовтим, що вказує, на його зміну. Ліворуч появився новий дочірній елемент, який підсвічено жовтим, що вказує на те, що його було додано. Новий дочірній елемент названий 'Counter' та містить бульбашковий стан названий 'count' із значенням 0. Правий дочірній елемента замінено на 'poof' зображення, що вказує на те, що його було видалено.">
 
-Clicking "next" again
+Натискання "наступний" знову
 
 </Diagram>
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
+Стан кожного `Counter` знищується щоразу, коли його видаляють із DOM. Саме тому вони скидаються щоразу, коли ви натискаєте кнопку.
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+Це рішення зручне, коли у вас лише кілька незалежних компонент, які рендеряться на одному місці. У цьому прикладі їх лише два, тому не складно рендерити обидві окремо в JSX.
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### Спосіб 2: Скидання стану за допомогою ключа {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+Існує також інший, більш загальний спосіб скидання стану компонента.
 
-You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+Ви могли бачити `key` коли [рендерите списки.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Ключі не тільки для списків! Ви можете використовувати ключі, щоб React розрізняв будь-які компоненти. За замовчуванням React використовує порядок в середині батьківського елемента ("перший лічильник", "другий лічильник"), щоб розрізняти компоненти. Але ключі дають можливість вам сказати до React, що це не просто *перший* лічильник або *другий* лічильник а конкретний лічильник — для прикладу, лічильник *Тайлера*. Таким чином, React буде знати лічильник *Тайлера* будь-коли він з'явиться в дереві!
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+В цьому прикладі, два `<Counter />` не поширюють стан, хоча вони появляються в одному місці в JSX:
 
 <Sandpack>
 
@@ -941,14 +941,14 @@ export default function Scoreboard() {
   return (
     <div>
       {isPlayerA ? (
-        <Counter key="Taylor" person="Taylor" />
+        <Counter key="Taylor" person="Тайлера" />
       ) : (
-        <Counter key="Sarah" person="Sarah" />
+        <Counter key="Sarah" person="Сари" />
       )}
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Наступний гравець!
       </button>
     </div>
   );
@@ -969,9 +969,9 @@ function Counter({ person }) {
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
-      <h1>{person}'s score: {score}</h1>
+      <h1>Рахунок {person}: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Додати один
       </button>
     </div>
   );
@@ -984,7 +984,7 @@ h1 {
 }
 
 .counter {
-  width: 100px;
+  width: 150px;
   text-align: center;
   border: 1px solid gray;
   border-radius: 4px;
@@ -999,29 +999,29 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+Переключення між станом Тайлера і Сари не зберігає стан. Це тому що **ви дали їм різні `key`:**
 
 ```js
 {isPlayerA ? (
-  <Counter key="Taylor" person="Taylor" />
+  <Counter key="Taylor" person="Тайлер" />
 ) : (
-  <Counter key="Sarah" person="Sarah" />
+  <Counter key="Sarah" person="Сара" />
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+Вказуючи `key` ви кажете React використовувати `key` як частину місця розташування замість його власного порядку в середині батьківського елемента. Саме через це, навіть якщо ви рендерите їх в одному місці в JSX, React бачить їх як два різних лічильника, саме тому вони ніколи не поширюватимуть стан. Кожного разу коли лічильник появляється на екрані, його стан створюється. Кожен раз коли він видалений, його стан знищується. Переключення між ними скидає їхній стан знову і знову.
 
 <Note>
 
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+Пам'ятайте, що ключі не є глобально унікальними. Вони лише визначають позицію *в середині батьківського елемента*.
 
 </Note>
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### Скидання форми за допомогою ключа {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+Скидання стану за допомогою ключа є особливо корисне при роботі з формами.
 
-In this chat app, the `<Chat>` component contains the text input state:
+В цьому чат-застосунку компонент `<Chat>` містить стан поля введення тексту:
 
 <Sandpack>
 
@@ -1045,9 +1045,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  { id: 0, name: 'Тайлер', email: 'taylor@mail.com' },
+  { id: 1, name: 'Аліса', email: 'alice@mail.com' },
+  { id: 2, name: 'Боб', email: 'bob@mail.com' }
 ];
 ```
 
@@ -1084,11 +1084,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Написати до ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Надіслати до {contact.email}</button>
     </section>
   );
 }
@@ -1116,17 +1116,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+Спробуйте ввести щось в поле введення і потім натиснути "Аліса" або "Боб" щоб вибрати іншого отримувача. Ви помітите, що стан поля введення збережено, тому що `<Chat>` рендериться в тому самому місці в дереві.
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**В більшості застосунків це може бути бажана поведінка але не в чат-застосунку!** Ви не хочете дозволити користувачу надіслати повідомлення, яке вони вже написали до іншої особи через випадкове натискання. Щоб виправити це, додайте `key`:
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+Це гарантує, що коли ви виберете іншого отримувача, компонент `Chat` буде створено заново, разом із усім станом у дереві під ним. React також створить нові DOM-елементи замість повторного використання старих.
 
-Now switching the recipient always clears the text field:
+Тепер при перемиканні отримувача поле введення завжди очищується:
 
 <Sandpack>
 
@@ -1150,9 +1150,9 @@ export default function Messenger() {
 }
 
 const contacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  { id: 0, name: 'Тайлер', email: 'taylor@mail.com' },
+  { id: 1, name: 'Аліса', email: 'alice@mail.com' },
+  { id: 2, name: 'Боб', email: 'bob@mail.com' }
 ];
 ```
 
@@ -1189,11 +1189,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Написати до ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Надіслати до {contact.email}</button>
     </section>
   );
 }
@@ -1223,24 +1223,24 @@ textarea {
 
 <DeepDive>
 
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### Збереження стану для видалених компонент {/*preserving-state-for-removed-components*/}
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+В справжньому чат-застосунку, ви можливо захочете відновити стан поля введення коли користувач знову вибирає попереднього отримувача. Є декілька способів, щоб зберегти стан "живим" для компоненти, що більше не є видимою:
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- Ви можете рендерити _всі_ чати замість одного поточного але сховати всі інші за допомогою CSS. Чати не будуть видалені із дерева, тому їхній локальний стан буде збережено. Це рішення добре працює для простих інтерфейсів користувача. Але, воно може стати дуже повільним, якщо приховані дерева великі та містять багато DOM-вузлів.
+- Ви можете [підняти стан вгору](/learn/sharing-state-between-components) і тримати очікуване повідомлення для кожного отримувача в батьківському компоненті. Цим методом, коли дочірній компонент буде видалено, це немає значення, тому що його батько зберігає важливу інформацію. Це найпоширеніше рішення.
+- Ви також можете використовувати інший джерело разом із станом React. Для прикладу, ви можливо хочете, щоб чернетка із повідомленням була присутня навіть коли користувач випадково закрив сторінку. Щоб реалізувати це, вам потрібно щоб `Chat` компонент ініціалізував власний стан і читав його із [`локального сховища`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), та зберігав чернетку там.
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+Не залежно від того, яку стратегію ви оберете, чат _із Алісою_ концептуально відрізняється від чату _з Бобом_, тому є сенс надати `ключ` до `<Chat>` дерева на основі поточного отримувача.
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- React Зберігає стан доти, доки той самий компонент відрендерений в тому самому місці.
+- Стан не зберігається в JSX-тегах. Він пов'язаний з позицією дерева, де ви помістили цей JSX.
+- Ви можете примусити піддерево скинути власний стан даючи йому інший ключ.
+- Не вкладайте визначення компонентів, інакше ви випадково скинете стан.
 
 </Recap>
 
@@ -1248,9 +1248,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+#### Виправити зникнення введеного тексту {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+В цьому прикладі показано повідомлення коли ви натискаєте на кнопку. Однак, натискання кнопки також випадково очищає поле введення. Чому це трапляється? Виправте це, щоб під час натискання кнопки поле для введення не очищувалось.
 
 <Sandpack>
 
@@ -1262,11 +1262,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Підказка: Яке ваше улюблене місто?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Сховати підказку</button>
       </div>
     );
   }
@@ -1275,7 +1275,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Показати підказку</button>
     </div>
   );
 }
@@ -1299,9 +1299,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+Проблема в тому, що `Form` рендериться в різних позиціях. У гілці `if` він є другим дочірнім елементом `<div>`, а у гілці `else` він є першим дочірнім елементом. Тому тип компонента на кожній позиції змінюється. Перша позиція змінюється між `p` та `Form`, коли друга позиція змінюється між `Form` та `button`. React скидає стан щоразу, коли тип компонента змінюється.
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+Найлегшим рішенням є об'єднання гілок, щоб `Form` завжди рендерився в одному і тому ж положені:
 
 <Sandpack>
 
@@ -1313,17 +1313,17 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Підказка: Яке ваше улюблене місто?</i></p>
       }
       <Form />
       {showHint ? (
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Сховати підказку</button>
       ) : (
         <button onClick={() => {
           setShowHint(true);
-        }}>Show hint</button>
+        }}>Показати підказку</button>
       )}
     </div>
   );
@@ -1347,7 +1347,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+Технічно, ви також можете добавити `null` перед `<Form />` в гілці `else`, щоб відповідати структурі `if` гілки:
 
 <Sandpack>
 
@@ -1359,11 +1359,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Підказка: Яке ваше улюблене місто?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Сховати підказку</button>
       </div>
     );
   }
@@ -1373,7 +1373,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Показати підказку</button>
     </div>
   );
 }
@@ -1395,19 +1395,19 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+У цьому випадку, `Form` завжди є другим дочірнім елементом, отже вона залишається на тому самому місці та зберігає стан. Але даний підхід  є менш очевидним та представляє ризик, що хтось інший видалить цей `null`.
 
 </Solution>
 
-#### Swap two form fields {/*swap-two-form-fields*/}
+#### Поміняти два поля форми {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+Ця форма дозволяє вам ввести ім'я та прізвище. Вона також має прапорець, який контролює яке поле буде відображатись першим. Коли ви виберете прапорець, поле "Прізвище" появиться перед полем "Ім'я".
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+Це майже працює але є помилка. Якщо ви заповните поле "Ім'я" та виберете прапорець, то текст залишиться в першому поллі для введення (котре тепер "Прізвище"). Виправте це, щоб той текст поля введення *також* переміщався коли змінюється порядок.
 
 <Hint>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+Схоже, що для цих полів введення, їхня позиція в батьківському елементі не є достатньою. Чи є якийсь спосіб повідомити React, як узгодити стан між повторними рендерингами?
 
 </Hint>
 
@@ -1425,22 +1425,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Змінити порядок
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field label="Last name" /> 
-        <Field label="First name" />
+        <Field label="Прізвище" /> 
+        <Field label="Ім'я" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field label="First name" /> 
-        <Field label="Last name" />
+        <Field label="Ім'я" /> 
+        <Field label="Прізвище" />
         {checkbox}
       </>
     );    
@@ -1471,7 +1471,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+Дайте `key` до обох `<Field>` компонентів в обох `if` та `else` гілках. Це повідомить React, як "зіставити" конкретний стан для кожного `<Field>` навіть коли їхній порядок в батьківському елементі змінюється:
 
 <Sandpack>
 
@@ -1487,22 +1487,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Змінити порядок
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field key="lastName" label="Last name" /> 
-        <Field key="firstName" label="First name" />
+        <Field key="lastName" label="Прізвище" /> 
+        <Field key="firstName" label="Ім'я" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field key="firstName" label="First name" /> 
-        <Field key="lastName" label="Last name" />
+        <Field key="firstName" label="Ім'я" /> 
+        <Field key="lastName" label="Прізвище" />
         {checkbox}
       </>
     );    
@@ -1533,11 +1533,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-#### Reset a detail form {/*reset-a-detail-form*/}
+#### Скинути форми деталей {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+Це список контактів, який можна редагувати. Ви можете редагувати дані вибраного контакту, а потім натиснути "Зберегти", щоб оновити їх, або "Скинути", щоб скасувати ваші зміни.
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+Коли ви вибираєте інший контакт (для прикладу, Аліса), Стан змінюється але форма продовжує показувати дані попереднього контакту. Виправте це так, щоб форма скидалася при зміні вибраного контакту.
 
 <Sandpack>
 
@@ -1587,9 +1587,9 @@ export default function ContactManager() {
 }
 
 const initialContacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  { id: 0, name: 'Тайлер', email: 'taylor@mail.com' },
+  { id: 1, name: 'Аліса', email: 'alice@mail.com' },
+  { id: 2, name: 'Боб', email: 'bob@mail.com' }
 ];
 ```
 
@@ -1629,7 +1629,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Ім'я:{' '}
         <input
           type="text"
           value={name}
@@ -1637,7 +1637,7 @@ export default function EditContact({ initialData, onSave }) {
         />
       </label>
       <label>
-        Email:{' '}
+        Пошта:{' '}
         <input
           type="email"
           value={email}
@@ -1652,13 +1652,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Зберегти
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Скинути
       </button>
     </section>
   );
@@ -1689,7 +1689,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+Дайте `key={selectedId}` до `EditContact` компонента. Таким чином, перемикання між різними контактами буде скидати форму:
 
 <Sandpack>
 
@@ -1740,9 +1740,9 @@ export default function ContactManager() {
 }
 
 const initialContacts = [
-  { id: 0, name: 'Taylor', email: 'taylor@mail.com' },
-  { id: 1, name: 'Alice', email: 'alice@mail.com' },
-  { id: 2, name: 'Bob', email: 'bob@mail.com' }
+  { id: 0, name: 'Тайлер', email: 'taylor@mail.com' },
+  { id: 1, name: 'Аліса', email: 'alice@mail.com' },
+  { id: 2, name: 'Боб', email: 'bob@mail.com' }
 ];
 ```
 
@@ -1782,7 +1782,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Ім'я:{' '}
         <input
           type="text"
           value={name}
@@ -1790,7 +1790,7 @@ export default function EditContact({ initialData, onSave }) {
         />
       </label>
       <label>
-        Email:{' '}
+        Пошта:{' '}
         <input
           type="email"
           value={email}
@@ -1805,13 +1805,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Зберегти
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Скинути
       </button>
     </section>
   );
@@ -1842,13 +1842,13 @@ button {
 
 </Solution>
 
-#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+#### Очистити зображення під час його завантаження {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+Коли ви натискаєте "Далі", браузер починає завантажувати наступне зображення. Однак, тому що воно відображається в тому самому тегу `<img>`, то за замовчуванням ви будете бачити попереднє зображення до того моменту поки не завантажиться наступне. Це може бути небажаним, якщо важливо, щоб текст завжди відповідав зображенню. Змініть це так, щоб коли ви натискаєте "Далі", попереднє зображення моментально очищається    When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
 
 <Hint>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+Чи є спосіб сказати React перестворювати DOM замість того, щоб  його перевикористання?
 
 </Hint>
 
@@ -1873,10 +1873,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Далі
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Зображення {index + 1} of {images.length}
       </h3>
       <img src={image.src} />
       <p>
@@ -1918,7 +1918,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+Ви можете надати `key` до `<img>` тегу. Коли цей `key` змінюється, React перестворює `<img>` DOM-вузол з нуля. Це спричиняє коротке миготіння під час завантаження кожного зображення, отже це може бути не те, що ви захочете робити для кожного зображення в вашому застосунку. Але це доцільно, якщо ви хочете переконатись, що зображення завжди відповідало тексту.
 
 <Sandpack>
 
@@ -1941,10 +1941,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Далі
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Зображення {index + 1} of {images.length}
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1986,11 +1986,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### Виправити неправильне розміщення стану в списку {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+В списку, кожний `Contact` має стан, що визначає чи "Показати пошту" буде натиснуте для цього. Натисніть "Показати пошту" для Аліси, І потім виберіть "Показати в зворотному порядку" прапорець. Ви помітите, що пошта _Тайлера_ розгорнута але пошта Аліси, яка була перенесена в низ, згорнута.
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+Виправте, це так, щоб розгорнутий стан відповідав кожному контакту, не зважаючи на вибраний порядок.
 
 <Sandpack>
 
@@ -2016,7 +2016,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Показати в зворотному порядку
       </label>
       <ul>
         {displayedContacts.map((contact, i) =>
@@ -2030,9 +2030,9 @@ export default function ContactList() {
 }
 
 const contacts = [
-  { id: 0, name: 'Alice', email: 'alice@mail.com' },
+  { id: 0, name: 'Аліса', email: 'alice@mail.com' },
   { id: 1, name: 'Bob', email: 'bob@mail.com' },
-  { id: 2, name: 'Taylor', email: 'taylor@mail.com' }
+  { id: 2, name: 'Тайлер', email: 'taylor@mail.com' }
 ];
 ```
 
@@ -2050,7 +2050,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Сховати' : 'Показати'} пошту
       </button>
     </>
   );
@@ -2080,16 +2080,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+Проблемою є те, що в цьому прикладі було використано індекс як `key`:
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+Однак ви хочете, щоб стан був пов'язаний з _кожним конкретним контактом_.
 
-Using the contact ID as a `key` instead fixes the issue:
+Використання ідентифікатора контакту як `key` вирішує цю проблему:
 
 <Sandpack>
 
@@ -2115,7 +2115,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Показати в зворотному порядку
       </label>
       <ul>
         {displayedContacts.map(contact =>
@@ -2129,9 +2129,9 @@ export default function ContactList() {
 }
 
 const contacts = [
-  { id: 0, name: 'Alice', email: 'alice@mail.com' },
-  { id: 1, name: 'Bob', email: 'bob@mail.com' },
-  { id: 2, name: 'Taylor', email: 'taylor@mail.com' }
+  { id: 0, name: 'Аліса', email: 'alice@mail.com' },
+  { id: 1, name: 'Боб', email: 'bob@mail.com' },
+  { id: 2, name: 'Тайлер', email: 'taylor@mail.com' }
 ];
 ```
 
@@ -2149,7 +2149,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Сховати' : 'Показати'} пошту
       </button>
     </>
   );
@@ -2177,7 +2177,7 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
+Стан пов'язаний із позицією дерева. За допомогою `key` можна вказати позицію за назвою, а не покладатися на порядок.
 
 </Solution>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 4e64c81ed..2093ec4f0 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -161,7 +161,7 @@
           "path": "/learn/sharing-state-between-components"
         },
         {
-          "title": "Preserving and Resetting State",
+          "title": "Збереження та скидання стану",
           "path": "/learn/preserving-and-resetting-state"
         },
         {