From 70e68921a3fb231d9c41075f8ebf1b41cbfb99e4 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Sat, 16 Mar 2019 18:05:58 -0400
Subject: [PATCH 01/12] Work in progress commit

---
 content/docs/state-and-lifecycle.md | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index cbd8f684a..414e394a3 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -1,6 +1,6 @@
 ---
 id: state-and-lifecycle
-title: State and Lifecycle
+title: Стан та життєвий цикл
 permalink: docs/state-and-lifecycle.html
 redirect_from:
   - "docs/interactivity-and-dynamic-uis.html"
@@ -8,9 +8,10 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
+На цій сторінці представлено поняття стану та життєвого циклу у React-компоненті. Ви можете знайти [детальньний API довідник на компонент тут](/docs/react-component.html).
 
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
+Розглянемо приклад відліку годинника з [одного з попередніх розділів] (/ docs / rendering-elements.html # updating-the-rendered-element). 
+В [Рендеринг елементів] (/ docs / rendering-elements.html # rendering-an-element-into-the-dom) ми дізналися лише один спосіб оновлення UI. Ми називаємо `ReactDOM.render ()`, щоб змінити відрендерний вивід інформації:
 
 ```js{8-11}
 function tick() {
@@ -31,9 +32,9 @@ setInterval(tick, 1000);
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
+У цьому розділі ми дізнаємося, як зробити компонент 'Clock' дійсно багаторазовим та інкапсульованим. Компонент сам налаштує свій таймер та оновлюватиметься кожну секунду.
 
-We can start by encapsulating how the clock looks:
+Ми можемо почати з того, як виглядає годинник:  
 
 ```js{3-6,12}
 function Clock(props) {
@@ -55,11 +56,11 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
+Однак, це пропускає важливу вимогу: той факт, що "Clock" встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації "Clock".
 
-Ideally we want to write this once and have the `Clock` update itself:
+В ідеалі ми хочемо написати це один раз аби `Clock` оновлював себе сам:
 
 ```js{2}
 ReactDOM.render(
@@ -68,17 +69,17 @@ ReactDOM.render(
 );
 ```
 
-To implement this, we need to add "state" to the `Clock` component.
+Аби це реалізувати, нам потрібно додати "state" до компонента 'Clock'.
 
-State is similar to props, but it is private and fully controlled by the component.
+Стан - подібний до пропсів, але він приватний і повністю контролюється компонентом.
 
-We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
+Ми [згадували раніше](/docs/components-and-props.html#functional-and-class-components), що компоненти, визначені як класи, мають деякі додаткові функції. Внутрішній стан - це і є функція яка доступна тільки для класів.
 
-## Converting a Function to a Class {#converting-a-function-to-a-class}
+## Перетворення функції на клас {#converting-a-function-to-a-class}
 
-You can convert a function component like `Clock` to a class in five steps:
+Ви можете перетворити функцію компоненту `Clock` на клас у п'ять кроків:
 
-1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends `React.Component`.
+1. Створіть клас [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) з тим же ім'ям, що продовжує `React.Component`.
 
 2. Add a single empty method to it called `render()`.
 

From cea2336313867057f00c47029dd1793203210021 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Sat, 16 Mar 2019 18:26:40 -0400
Subject: [PATCH 02/12] Work in progress

---
 content/docs/state-and-lifecycle.md | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 414e394a3..e3ec18a09 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -81,13 +81,14 @@ ReactDOM.render(
 
 1. Створіть клас [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) з тим же ім'ям, що продовжує `React.Component`.
 
-2. Add a single empty method to it called `render()`.
+2. Додайте до нього один порожній метод, який називається `render()`.
 
-3. Move the body of the function into the `render()` method.
+3. Перемістіть зміст функції в метод `render()`.
 
-4. Replace `props` with `this.props` in the `render()` body.
+4. Замініть `props` на` this.props` в змісті `render()`.
 
-5. Delete the remaining empty function declaration.
+Видаліть порожні оголошення функції які залишилися.
+5. Видаліть порожні оголошення функції які залишилися.
 
 ```js
 class Clock extends React.Component {
@@ -102,13 +103,13 @@ class Clock extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` is now defined as a class rather than a function.
+`Clock` тепер визначається як клас, а не як функція.
 
-The `render` method will be called each time an update happens, but as long as we render `<Clock />` into the same DOM node, only a single instance of the `Clock` class will be used. This lets us use additional features such as local state and lifecycle methods.
-
-## Adding Local State to a Class {#adding-local-state-to-a-class}
+Метод `render` буде викликатися кожного разу, коли відбуватиметься оновлення, але до тих пір, поки ми рендеремо `<Clock />` в той же вузол DOM, буде використано лише один екземпляр класу `Clock`. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
+ 
+## Додавання внутрішнього стану до класу {#adding-local-state-to-a-class}
 
 We will move the `date` from props to state in three steps:
 
@@ -194,7 +195,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
 Next, we'll make the `Clock` set up its own timer and update itself every second.
 
@@ -303,7 +304,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 Now the clock ticks every second.
 
@@ -438,7 +439,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
 
@@ -463,7 +464,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 Each `Clock` sets up its own timer and updates independently.
 

From 5547684ec61910943da5d0faadff279084eb66b4 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Sat, 16 Mar 2019 19:34:52 -0400
Subject: [PATCH 03/12] WIP

---
 content/docs/state-and-lifecycle.md | 35 ++++++++++++++---------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index e3ec18a09..11a7cfd8b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -111,9 +111,9 @@ class Clock extends React.Component {
  
 ## Додавання внутрішнього стану до класу {#adding-local-state-to-a-class}
 
-We will move the `date` from props to state in three steps:
+Ми перемістимо `date` від пропсів до стану, в три етапи:
 
-1) Replace `this.props.date` with `this.state.date` in the `render()` method:
+1) Замінити `this.props.date` на `this.state.date` у методі `render()`:
 
 ```js{6}
 class Clock extends React.Component {
@@ -128,7 +128,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
+2) Додайте [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor), який призначає початковий `this.state`:
 
 ```js{4}
 class Clock extends React.Component {
@@ -148,7 +148,8 @@ class Clock extends React.Component {
 }
 ```
 
-Note how we pass `props` to the base constructor:
+Зверніть увагу на те, як ми передаємо `props`(пропси) базовому конструктору:
+
 
 ```js{2}
   constructor(props) {
@@ -156,10 +157,9 @@ Note how we pass `props` to the base constructor:
     this.state = {date: new Date()};
   }
 ```
+Компоненти класу повинні завжди викликати базовий конструктор з `props`.
 
-Class components should always call the base constructor with `props`.
-
-3) Remove the `date` prop from the `<Clock />` element:
+3) Видалити елемент `date` з елемента `<Clock />`:
 
 ```js{2}
 ReactDOM.render(
@@ -167,10 +167,9 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
+Пізніше ми додамо код таймера назад до самого компонента.
 
-We will later add the timer code back to the component itself.
-
-The result looks like this:
+Результат виглядає так:
 
 ```js{2-5,11,18}
 class Clock extends React.Component {
@@ -197,17 +196,17 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Next, we'll make the `Clock` set up its own timer and update itself every second.
+Далі, ми зробимо так аби `Clock` сам налаштувати свій таймер і оновлювався себе кожну секунду.
 
-## Adding Lifecycle Methods to a Class {#adding-lifecycle-methods-to-a-class}
+## Додавання методів життєвого циклу до класу {#adding-lifecycle-methods-to-a-class}
 
-In applications with many components, it's very important to free up resources taken by the components when they are destroyed.
+У додатках з багатьма компонентами дуже важливо вивільнити ресурси, що вилучаються компонентами, коли вони знищуються.
 
-We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the `Clock` is rendered to the DOM for the first time. This is called "mounting" in React.
+Ми хочемо [налаштувати таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, коли `Clock` буде передано DOM вперше. Це називається "монтаж" в React.
 
-We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the `Clock` is removed. This is called "unmounting" in React.
+Ми також хочемо [оновити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли DOM видаляється. Це називається "розмотування" в React.
 
-We can declare special methods on the component class to run some code when a component mounts and unmounts:
+Ми можемо оголосити спеціальні методи на класі компонентів для запуску деякого коду, коли компонент монтується і розмотується:
 
 ```js{7-9,11-13}
 class Clock extends React.Component {
@@ -235,9 +234,9 @@ class Clock extends React.Component {
 }
 ```
 
-These methods are called "lifecycle methods".
+Ці методи називаються "методами життєвого циклу".
 
-The `componentDidMount()` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
+Метод `componentDidMount()` виконується після того, як компонентний вивід був переданий DOM. Це гарне місце для налаштування таймера:
 
 ```js{2-5}
   componentDidMount() {

From c7f0295152a537c5150975324ad19f11642f82cc Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Mon, 18 Mar 2019 21:43:21 -0400
Subject: [PATCH 04/12] Updated regarded to the suggestion. Please revise.

---
 content/docs/state-and-lifecycle.md | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 11a7cfd8b..d28d37999 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -10,8 +10,7 @@ next: handling-events.html
 
 На цій сторінці представлено поняття стану та життєвого циклу у React-компоненті. Ви можете знайти [детальньний API довідник на компонент тут](/docs/react-component.html).
 
-Розглянемо приклад відліку годинника з [одного з попередніх розділів] (/ docs / rendering-elements.html # updating-the-rendered-element). 
-В [Рендеринг елементів] (/ docs / rendering-elements.html # rendering-an-element-into-the-dom) ми дізналися лише один спосіб оновлення UI. Ми називаємо `ReactDOM.render ()`, щоб змінити відрендерний вивід інформації:
+Розглянемо приклад відліку годинника з [одного з попередніх розділів](/docs/rendering-elements.html#updating-the-rendered-element). У [Рендерингу елементів](/docs/rendering-elements.html#rendering-an-element-into-the-dom) ми дізналися лише один спосіб оновлення UI. Ми викликаємо його — `ReactDOM.render()`, щоб змінити відрендерний вивід інформації:
 
 ```js{8-11}
 function tick() {
@@ -58,7 +57,7 @@ setInterval(tick, 1000);
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-Однак, це пропускає важливу вимогу: той факт, що "Clock" встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації "Clock".
+Однак, це пропускає важливу вимогу: той факт, що `Clock` встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації `Clock`.
 
 В ідеалі ми хочемо написати це один раз аби `Clock` оновлював себе сам:
 
@@ -83,11 +82,10 @@ ReactDOM.render(
 
 2. Додайте до нього один порожній метод, який називається `render()`.
 
-3. Перемістіть зміст функції в метод `render()`.
+3. Перемістіть тіло функції в метод `render()`.
 
-4. Замініть `props` на` this.props` в змісті `render()`.
+4. Замініть `props` на `this.props` в тілі `render()`.
 
-Видаліть порожні оголошення функції які залишилися.
 5. Видаліть порожні оголошення функції які залишилися.
 
 ```js
@@ -150,7 +148,6 @@ class Clock extends React.Component {
 
 Зверніть увагу на те, як ми передаємо `props`(пропси) базовому конструктору:
 
-
 ```js{2}
   constructor(props) {
     super(props);
@@ -200,9 +197,9 @@ ReactDOM.render(
 
 ## Додавання методів життєвого циклу до класу {#adding-lifecycle-methods-to-a-class}
 
-У додатках з багатьма компонентами дуже важливо вивільнити ресурси, що вилучаються компонентами, коли вони знищуються.
+У додатках з багатьма компонентами, дуже важливо вивільняти ресурси які використовуються компонентами коли вони знищуються.
 
-Ми хочемо [налаштувати таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, коли `Clock` буде передано DOM вперше. Це називається "монтаж" в React.
+Ми хочемо [налаштувати таймер](https://developer.mozilla.org/uk/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) кожного разу, коли `Clock` буде передано DOM вперше. Це називається "монтування" в React.
 
 Ми також хочемо [оновити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли DOM видаляється. Це називається "розмотування" в React.
 
@@ -247,9 +244,9 @@ class Clock extends React.Component {
   }
 ```
 
-Note how we save the timer ID right on `this`.
+Зверніть увагу на те, як ми зберігаємо ідентифікатор таймера прямо на `this`.
 
-While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).
+Хоча `this.props` налаштовує сам React, а` this.state` має особливе значення, ви можете додавати додаткові поля до класу вручну, якщо потрібно зберегти те, що не бере участь у потоці даних (як ідентифікатор таймера).
 
 We will tear down the timer in the `componentWillUnmount()` lifecycle method:
 

From 51c185b48f8b5f43bce5c37ff8b3f70e453dbf0e Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Mon, 18 Mar 2019 23:09:33 -0400
Subject: [PATCH 05/12] Added a little more translation

---
 content/docs/state-and-lifecycle.md | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index d28d37999..d929cea48 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -68,7 +68,7 @@ ReactDOM.render(
 );
 ```
 
-Аби це реалізувати, нам потрібно додати "state" до компонента 'Clock'.
+Аби це реалізувати, нам потрібно додати "state" до компонента `Clock`.
 
 Стан - подібний до пропсів, але він приватний і повністю контролюється компонентом.
 
@@ -246,9 +246,9 @@ class Clock extends React.Component {
 
 Зверніть увагу на те, як ми зберігаємо ідентифікатор таймера прямо на `this`.
 
-Хоча `this.props` налаштовує сам React, а` this.state` має особливе значення, ви можете додавати додаткові поля до класу вручну, якщо потрібно зберегти те, що не бере участь у потоці даних (як ідентифікатор таймера).
+Хоча `this.props` налаштовує сам React, а `this.state` має особливе значення, ви можете додавати додаткові поля до класу вручну, якщо потрібно зберегти те, що не бере участь у потоці даних (як ідентифікатор таймера).
 
-We will tear down the timer in the `componentWillUnmount()` lifecycle method:
+У методі життєвого циклу `componentWillUnmount()`, ми розірвемо таймер:
 
 ```js{2}
   componentWillUnmount() {
@@ -256,9 +256,9 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle method:
   }
 ```
 
-Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
+Нарешті, ми реалізуємо метод під назвою `tick()`, що компонент `Clock` буде використовувати кожну секунду.
 
-It will use `this.setState()` to schedule updates to the component local state:
+Він буде використовувати `this.setState()` для планування оновлення внутрішнього стану компонента:
 
 ```js{18-22}
 class Clock extends React.Component {
@@ -302,20 +302,22 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
-Now the clock ticks every second.
+Тепер годинник відстукує кожну секунду.
 
-Let's quickly recap what's going on and the order in which the methods are called:
+Давайте швидко повторимо, що відбувається, і порядок, в якому ці методи викликаються:
 
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
+1) Коли `<Clock />` передається до `ReactDOM.render ()`, React викликає конструктор компонента `Clock`. Оскільки `Clock` має відображати поточний час, він ініціалізує `this.state` з об'єктом, включаючи поточний час. Пізніше ми оновимо цей стан.
 
-2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
+2) React потім викликає `Clock` компонентний метод `render()`. Ось як React дізнається, що саме має відображатися на екрані. Потім React оновлює DOM, щоб він відповідав виводу рендера `Clock`.
 
-3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle method. Inside it, the `Clock` component asks the browser to set up a timer to call the component's `tick()` method once a second.
+3) Коли виведення інформації `Clock` вставляється в DOM, React викликає метод життєвого циклу `componentDidMount()`. Всередині методу, компонент `Clock` просить у браузера налаштувати таймер для виклику методу компонента `tick()` один раз на секунду.
 
-4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls the `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
+4) Кожну секунду браузер викликає метод `tick()`. У цьому методі, компонент `Clock` планує оновлення UI, викликаючи `setState()` з об'єктом, що містить поточний час. Завдяки виклику `setState()` React знає, що стан змінився, і знову викликає метод `render()`, щоб дізнатися, що має бути на екрані. Цього разу `this.state.date` в методі `render()` буде відрізнятися, і тому рендерний вивід інформаціі буде включати оновлений час. React оновлює DOM відповідно.
 
 5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
 
+Якщо компонент `Clock` коли-небудь буде видалений з DOM, React викличе метод життєвого циклу `componentWillUnmount()`, аби таймер зупинився.
+
 ## Using State Correctly {#using-state-correctly}
 
 There are three things you should know about `setState()`.

From 7cd9afa77c0dcfe060092d9b6e97cef88b2ddc34 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Mon, 18 Mar 2019 23:58:48 -0400
Subject: [PATCH 06/12] Adding more

---
 content/docs/state-and-lifecycle.md | 44 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index d929cea48..4b3744f74 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -318,13 +318,13 @@ ReactDOM.render(
 
 Якщо компонент `Clock` коли-небудь буде видалений з DOM, React викличе метод життєвого циклу `componentWillUnmount()`, аби таймер зупинився.
 
-## Using State Correctly {#using-state-correctly}
+## Правильно використовувати стан {#using-state-correctly}
 
-There are three things you should know about `setState()`.
+Є три речі, які ви повинні знати про `setState()`.
 
-### Do Not Modify State Directly {#do-not-modify-state-directly}
+### Не змінюйте стан безпосередньо {#do-not-modify-state-directly}
 
-For example, this will not re-render a component:
+Наприклад, це не буде повторно рендерити компонент:
 
 ```js
 // Wrong
@@ -338,15 +338,15 @@ Instead, use `setState()`:
 this.setState({comment: 'Hello'});
 ```
 
-The only place where you can assign `this.state` is the constructor.
+Конструктор - це єдине місце, де можна призначити `this.state`.
 
 ### State Updates May Be Asynchronous {#state-updates-may-be-asynchronous}
 
-React may batch multiple `setState()` calls into a single update for performance.
+React може групувати кілька викликів `setState()` в одне оновлення для продуктивності.
 
-Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
+Оскільки `this.props` і `this.state` можуть бути оновлені асинхронно, не варто покладатися на їх значення для обчислення наступного стану.
 
-For example, this code may fail to update the counter:
+Наприклад, цей код може не оновити лічильник:
 
 ```js
 // Wrong
@@ -355,7 +355,7 @@ this.setState({
 });
 ```
 
-To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
+Щоб виправити це, скористайтеся другою формою `setState()`, яка приймає функцію, а не об'єкт. Ця функція отримає попередній стан як перший аргумент, а пропси в момент, коли оновлення застосовується як другий аргумент:
 
 ```js
 // Correct
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
+Вище було використано функцію [стрілкова функція](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції) але вона також працює з регулярними функціями:
 
 ```js
 // Correct
@@ -375,11 +375,11 @@ this.setState(function(state, props) {
 });
 ```
 
-### State Updates are Merged {#state-updates-are-merged}
+### Об'єднання станового оновлення {#state-updates-are-merged}
 
-When you call `setState()`, React merges the object you provide into the current state.
+Коли ви називаєте `setState()`, React об'єднує об'єкт, який ви надаєте, до поточного стану.
 
-For example, your state may contain several independent variables:
+Наприклад, ваш стан може містити кілька незалежних змінних:
 
 ```js{4,5}
   constructor(props) {
@@ -391,7 +391,7 @@ For example, your state may contain several independent variables:
   }
 ```
 
-Then you can update them independently with separate `setState()` calls:
+Тоді ви можете оновлювати їх окремо за допомогою окремих викликів `setState()`:
 
 ```js{4,10}
   componentDidMount() {
@@ -409,27 +409,27 @@ Then you can update them independently with separate `setState()` calls:
   }
 ```
 
-The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`.
+Злиття є дрібним, тому `this.setState({comments})` залишає `this.state.posts` незмінним, але повністю замінює `this.state.comments`.
 
-## The Data Flows Down {#the-data-flows-down}
+## Потік данних вниз {#the-data-flows-down}
 
-Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
+Ні батьківські, ні дочірні компоненти не можуть знати, чи є певний компонент становим або безстановим, і вони не повинні піклуватися, чи визначено це як функцію або клас.
 
-This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
+Саме тому стан часто називають внутрішнім або інкапсульованим. Він не доступний для будь-якого іншого компоненту, окрім того, який їм володіє і встановлює.
 
-A component may choose to pass its state down as props to its child components:
+Компонент може передати свій стан вниз як пропси до своїх дочірніх компонентів:
 
 ```js
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
-This also works for user-defined components:
+Це також працює для визначених користувачем компонентів:
 
 ```js
 <FormattedDate date={this.state.date} />
 ```
 
-The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
+Компонент `FormattedDate` отримає `date` у своїх пропсів і не буде знати, чи вийшов він зі стану `Clock`, з пропсів `Clock`, або був набраний вручну:
 
 ```js
 function FormattedDate(props) {
@@ -439,7 +439,7 @@ function FormattedDate(props) {
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
+Це зазвичай називається "зверху вниз" або "односпрямованим" потоком даних. Будь-який стан завжди належить певному компоненту, і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти "нижче" їх у дереві.
 
 If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
 

From 7b6c42ab8d92befadc23c7585686c6cdd3fdea62 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Tue, 19 Mar 2019 19:36:43 -0400
Subject: [PATCH 07/12] Fixed translations

---
 content/docs/state-and-lifecycle.md | 64 ++++++++++++++---------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 4b3744f74..2403a7ed8 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -8,9 +8,9 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-На цій сторінці представлено поняття стану та життєвого циклу у React-компоненті. Ви можете знайти [детальньний API довідник на компонент тут](/docs/react-component.html).
+На цій сторінці представлено поняття стану та життєвого циклу у React-компоненті. Ви можете знайти [детальний API-довідник по компонентах тут](/docs/react-component.html).
 
-Розглянемо приклад відліку годинника з [одного з попередніх розділів](/docs/rendering-elements.html#updating-the-rendered-element). У [Рендерингу елементів](/docs/rendering-elements.html#rendering-an-element-into-the-dom) ми дізналися лише один спосіб оновлення UI. Ми викликаємо його — `ReactDOM.render()`, щоб змінити відрендерний вивід інформації:
+Розглянемо приклад відліку годинника з [одного з попередніх розділів](/docs/rendering-elements.html#updating-the-rendered-element). У [Рендерингу елементів](/docs/rendering-elements.html#rendering-an-element-into-the-dom) ми дізналися лише один спосіб оновлення UI. Ми викликаємо `ReactDOM.render()`, щоб змінити відрендерний вивід інформації:
 
 ```js{8-11}
 function tick() {
@@ -70,15 +70,15 @@ ReactDOM.render(
 
 Аби це реалізувати, нам потрібно додати "state" до компонента `Clock`.
 
-Стан - подібний до пропсів, але він приватний і повністю контролюється компонентом.
+Стан подібний до пропсів, але він приватний і повністю контролюється компонентом.
 
-Ми [згадували раніше](/docs/components-and-props.html#functional-and-class-components), що компоненти, визначені як класи, мають деякі додаткові функції. Внутрішній стан - це і є функція яка доступна тільки для класів.
+Ми [згадували раніше](/docs/components-and-props.html#functional-and-class-components), що компоненти, визначені як класи, мають деякі додаткові функції. Внутрішній стан — це і є функція яка доступна тільки для класів.
 
 ## Перетворення функції на клас {#converting-a-function-to-a-class}
 
 Ви можете перетворити функцію компоненту `Clock` на клас у п'ять кроків:
 
-1. Створіть клас [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) з тим же ім'ям, що продовжує `React.Component`.
+1. Створіть клас [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) з тим же ім'ям, що наслідує `React.Component`.
 
 2. Додайте до нього один порожній метод, який називається `render()`.
 
@@ -105,11 +105,11 @@ class Clock extends React.Component {
 
 `Clock` тепер визначається як клас, а не як функція.
 
-Метод `render` буде викликатися кожного разу, коли відбуватиметься оновлення, але до тих пір, поки ми рендеремо `<Clock />` в той же вузол DOM, буде використано лише один екземпляр класу `Clock`. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
+Метод `render` буде викликатися кожного разу, коли відбуватиметься оновлення. Але до тих пір, поки ми рендеремо `<Clock />` в той же вузол DOM, буде використано лише один екземпляр класу `Clock`. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
  
 ## Додавання внутрішнього стану до класу {#adding-local-state-to-a-class}
 
-Ми перемістимо `date` від пропсів до стану, в три етапи:
+Ми перемістимо `date` з пропсів до стану в три етапи:
 
 1) Замінити `this.props.date` на `this.state.date` у методі `render()`:
 
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) Додайте [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor), який призначає початковий `this.state`:
+2) Додайте [конструктор класу](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor), який присвоює `this.state` початкове значення:
 
 ```js{4}
 class Clock extends React.Component {
@@ -193,17 +193,17 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Далі, ми зробимо так аби `Clock` сам налаштувати свій таймер і оновлювався себе кожну секунду.
+Далі ми зробимо так, аби `Clock` сам налаштував свій таймер і оновлювався себе кожну секунду.
 
 ## Додавання методів життєвого циклу до класу {#adding-lifecycle-methods-to-a-class}
 
-У додатках з багатьма компонентами, дуже важливо вивільняти ресурси які використовуються компонентами коли вони знищуються.
+У додатках з багатьма компонентами, дуже важливо при знищенні компонентів вивільняти ресурси, що використовуються.
 
-Ми хочемо [налаштувати таймер](https://developer.mozilla.org/uk/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) кожного разу, коли `Clock` буде передано DOM вперше. Це називається "монтування" в React.
+Ми хочемо [налаштувати таймер](https://developer.mozilla.org/uk/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) кожного разу, коли `Clock` буде передано DOM вперше. У React це називається "монтування".
 
-Ми також хочемо [оновити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли DOM видаляється. Це називається "розмотування" в React.
+Ми також хочемо [очистити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли створений компонентом Clock DOM видаляється. У React це називається "демонтування".
 
-Ми можемо оголосити спеціальні методи на класі компонентів для запуску деякого коду, коли компонент монтується і розмотується:
+Ми можемо оголосити спеціальні методи в класі компонента, які будуть викликані тоді, коли компонент монтується і демонтується:
 
 ```js{7-9,11-13}
 class Clock extends React.Component {
@@ -244,11 +244,11 @@ class Clock extends React.Component {
   }
 ```
 
-Зверніть увагу на те, як ми зберігаємо ідентифікатор таймера прямо на `this`.
+Зверніть увагу на те, як ми зберігаємо ідентифікатор таймера прямо у `this`.
 
 Хоча `this.props` налаштовує сам React, а `this.state` має особливе значення, ви можете додавати додаткові поля до класу вручну, якщо потрібно зберегти те, що не бере участь у потоці даних (як ідентифікатор таймера).
 
-У методі життєвого циклу `componentWillUnmount()`, ми розірвемо таймер:
+У методі життєвого циклу `componentWillUnmount()`, ми очистимо таймер:
 
 ```js{2}
   componentWillUnmount() {
@@ -256,7 +256,7 @@ class Clock extends React.Component {
   }
 ```
 
-Нарешті, ми реалізуємо метод під назвою `tick()`, що компонент `Clock` буде використовувати кожну секунду.
+Нарешті, ми реалізуємо метод під назвою `tick()`, який компонент `Clock` буде запускати кожну секунду.
 
 Він буде використовувати `this.setState()` для планування оновлення внутрішнього стану компонента:
 
@@ -306,13 +306,13 @@ ReactDOM.render(
 
 Давайте швидко повторимо, що відбувається, і порядок, в якому ці методи викликаються:
 
-1) Коли `<Clock />` передається до `ReactDOM.render ()`, React викликає конструктор компонента `Clock`. Оскільки `Clock` має відображати поточний час, він ініціалізує `this.state` з об'єктом, включаючи поточний час. Пізніше ми оновимо цей стан.
+1) Коли `<Clock />` передається до `ReactDOM.render ()`, React викликає конструктор компонента `Clock`. Оскільки `Clock` має відображати поточний час, він ініціалізує `this.state` з з об'єктом, що включає поточний час. Пізніше ми оновимо цей стан.
 
-2) React потім викликає `Clock` компонентний метод `render()`. Ось як React дізнається, що саме має відображатися на екрані. Потім React оновлює DOM, щоб він відповідав виводу рендера `Clock`.
+2) React потім викликає `Clock` метод `render()` компонента. Ось як React дізнається, що саме має відображатися на екрані. Потім React оновлює DOM, щоб він відповідав виводу рендера `Clock`.
 
-3) Коли виведення інформації `Clock` вставляється в DOM, React викликає метод життєвого циклу `componentDidMount()`. Всередині методу, компонент `Clock` просить у браузера налаштувати таймер для виклику методу компонента `tick()` один раз на секунду.
+3) Коли виведення інформації `Clock` вставляється в DOM, React викликає метод життєвого циклу `componentDidMount()`. Всередині нього компонент `Clock` просить у браузера налаштувати таймер для виклику методу компонента `tick()` один раз на секунду.
 
-4) Кожну секунду браузер викликає метод `tick()`. У цьому методі, компонент `Clock` планує оновлення UI, викликаючи `setState()` з об'єктом, що містить поточний час. Завдяки виклику `setState()` React знає, що стан змінився, і знову викликає метод `render()`, щоб дізнатися, що має бути на екрані. Цього разу `this.state.date` в методі `render()` буде відрізнятися, і тому рендерний вивід інформаціі буде включати оновлений час. React оновлює DOM відповідно.
+4) Кожну секунду браузер викликає метод `tick()`. У цьому методі компонент `Clock` планує оновлення UI, викликаючи `setState()` з об'єктом, що містить поточний час. Завдяки виклику `setState()` React знає, що стан змінився, і знову викликає метод `render()`, щоб дізнатися, що має бути на екрані. Цього разу `this.state.date` в методі `render()` буде відрізнятися і тому вивід рендера буде включати оновлений час. React оновлює DOM відповідно.
 
 5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
 
@@ -338,7 +338,7 @@ Instead, use `setState()`:
 this.setState({comment: 'Hello'});
 ```
 
-Конструктор - це єдине місце, де можна призначити `this.state`.
+Конструктор — це єдине місце, де можна присвоїти `this.state`.
 
 ### State Updates May Be Asynchronous {#state-updates-may-be-asynchronous}
 
@@ -355,7 +355,7 @@ this.setState({
 });
 ```
 
-Щоб виправити це, скористайтеся другою формою `setState()`, яка приймає функцію, а не об'єкт. Ця функція отримає попередній стан як перший аргумент, а пропси в момент, коли оновлення застосовується як другий аргумент:
+Щоб виправити це, скористайтеся другою формою `setState()`, яка приймає функцію, а не об'єкт. Ця функція отримає попередній стан як перший аргумент і значення пропсів безпосередньо в момент оновлення як другий аргумент:
 
 ```js
 // Correct
@@ -364,7 +364,7 @@ this.setState((state, props) => ({
 }));
 ```
 
-Вище було використано функцію [стрілкова функція](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції) але вона також працює з регулярними функціями:
+Вище було використано [стрілкову функцію](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/Стрілкові_функції), але це також працює із звичайними функціями:
 
 ```js
 // Correct
@@ -375,9 +375,9 @@ this.setState(function(state, props) {
 });
 ```
 
-### Об'єднання станового оновлення {#state-updates-are-merged}
+### Об'єднання оновлень стану {#state-updates-are-merged}
 
-Коли ви називаєте `setState()`, React об'єднує об'єкт, який ви надаєте, до поточного стану.
+Коли ви викликаєте `setState()`, React об'єднує об'єкт, який ви надаєте, із поточним станом.
 
 Наприклад, ваш стан може містити кілька незалежних змінних:
 
@@ -409,15 +409,15 @@ this.setState(function(state, props) {
   }
 ```
 
-Злиття є дрібним, тому `this.setState({comments})` залишає `this.state.posts` незмінним, але повністю замінює `this.state.comments`.
+Злиття є поверхневим, а тому `this.setState({comments})` залишає `this.state.posts` незмінним, але повністю замінює `this.state.comments`.
 
-## Потік данних вниз {#the-data-flows-down}
+## Потік даних вниз {#the-data-flows-down}
 
-Ні батьківські, ні дочірні компоненти не можуть знати, чи є певний компонент становим або безстановим, і вони не повинні піклуватися, чи визначено це як функцію або клас.
+Ні батьківські, ні дочірні компоненти не можуть знати, чи є певний компонент становим або безстановим, і вони не повинні піклуватися, чи визначено його як функцію або клас.
 
-Саме тому стан часто називають внутрішнім або інкапсульованим. Він не доступний для будь-якого іншого компоненту, окрім того, який їм володіє і встановлює.
+Саме тому стан часто називають внутрішнім або інкапсульованим. Він не доступний для будь-якого іншого компоненту, окрім того, який ним володіє і встановлює.
 
-Компонент може передати свій стан вниз як пропси до своїх дочірніх компонентів:
+Компонент може передати свій стан вниз у якості пропсів до своїх дочірніх компонентів:
 
 ```js
 <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
@@ -429,7 +429,7 @@ this.setState(function(state, props) {
 <FormattedDate date={this.state.date} />
 ```
 
-Компонент `FormattedDate` отримає `date` у своїх пропсів і не буде знати, чи вийшов він зі стану `Clock`, з пропсів `Clock`, або був набраний вручну:
+Компонент `FormattedDate` отримає `date` у своїх пропсах і не буде знати, чи він належить стану `Clock`, чи пропсам `Clock`, чи був введений вручну:
 
 ```js
 function FormattedDate(props) {
@@ -439,7 +439,7 @@ function FormattedDate(props) {
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-Це зазвичай називається "зверху вниз" або "односпрямованим" потоком даних. Будь-який стан завжди належить певному компоненту, і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти "нижче" їх у дереві.
+Це зазвичай називається "зверху вниз" або "односпрямованим" потоком даних. Будь-який стан завжди належить певному компоненту і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти, що знаходяться "нижче" у дереві.
 
 If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
 

From 821c81cb76e96ebd292678892d5ac14fd0b43c07 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Tue, 19 Mar 2019 21:11:17 -0400
Subject: [PATCH 08/12] Finished translation

---
 content/docs/state-and-lifecycle.md | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 2403a7ed8..793cc4703 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,7 +29,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
 У цьому розділі ми дізнаємося, як зробити компонент 'Clock' дійсно багаторазовим та інкапсульованим. Компонент сам налаштує свій таймер та оновлюватиметься кожну секунду.
 
@@ -126,7 +126,7 @@ class Clock extends React.Component {
 }
 ```
 
-2) Додайте [конструктор класу](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor), який присвоює `this.state` початкове значення:
+2) Додайте [конструктор класу](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Classes), який присвоює `this.state` початкове значення:
 
 ```js{4}
 class Clock extends React.Component {
@@ -314,9 +314,7 @@ ReactDOM.render(
 
 4) Кожну секунду браузер викликає метод `tick()`. У цьому методі компонент `Clock` планує оновлення UI, викликаючи `setState()` з об'єктом, що містить поточний час. Завдяки виклику `setState()` React знає, що стан змінився, і знову викликає метод `render()`, щоб дізнатися, що має бути на екрані. Цього разу `this.state.date` в методі `render()` буде відрізнятися і тому вивід рендера буде включати оновлений час. React оновлює DOM відповідно.
 
-5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
-
-Якщо компонент `Clock` коли-небудь буде видалений з DOM, React викличе метод життєвого циклу `componentWillUnmount()`, аби таймер зупинився.
+5) Якщо компонент `Clock` коли-небудь буде видалений з DOM, React викличе метод життєвого циклу `componentWillUnmount()`, аби таймер зупинився.
 
 ## Правильно використовувати стан {#using-state-correctly}
 
@@ -340,7 +338,7 @@ this.setState({comment: 'Hello'});
 
 Конструктор — це єдине місце, де можна присвоїти `this.state`.
 
-### State Updates May Be Asynchronous {#state-updates-may-be-asynchronous}
+### Станові оновлення можуть бути асинхронними {#state-updates-may-be-asynchronous}
 
 React може групувати кілька викликів `setState()` в одне оновлення для продуктивності.
 
@@ -441,9 +439,9 @@ function FormattedDate(props) {
 
 Це зазвичай називається "зверху вниз" або "односпрямованим" потоком даних. Будь-який стан завжди належить певному компоненту і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти, що знаходяться "нижче" у дереві.
 
-If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
+Уявіть дерево компонентів як водоспад пропсів, де стан кожного компонента подібний до додаткового джерела води, який приєднується до нього в довільній точці, але тече й вниз.
 
-To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
+Щоб показати, що всі компоненти є дійсно ізольованими, ми можемо створити компонент `App`, який рендерить три `<Clock>`:
 
 ```js{4-6}
 function App() {
@@ -464,6 +462,6 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-Each `Clock` sets up its own timer and updates independently.
+Кожен `Clock` встановлює свій власний таймер і оновлюється самостійно.
 
-In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.
+У додатках React, незалежно від того, чи є компонент зі станом або без без нього, він вважається деталлю реалізації компонента, який може змінюватися з часом. Можна використовувати компоненти без стану всередині компонентів зі станом та навпаки.
\ No newline at end of file

From 2406918b94576f2cdfacfb2b3609ff70df4d5464 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Wed, 20 Mar 2019 14:07:39 -0400
Subject: [PATCH 09/12] Fixed

---
 content/docs/state-and-lifecycle.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 793cc4703..0df1609d2 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -154,6 +154,7 @@ class Clock extends React.Component {
     this.state = {date: new Date()};
   }
 ```
+
 Компоненти класу повинні завжди викликати базовий конструктор з `props`.
 
 3) Видалити елемент `date` з елемента `<Clock />`:
@@ -164,6 +165,7 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
+
 Пізніше ми додамо код таймера назад до самого компонента.
 
 Результат виглядає так:
@@ -464,4 +466,4 @@ ReactDOM.render(
 
 Кожен `Clock` встановлює свій власний таймер і оновлюється самостійно.
 
-У додатках React, незалежно від того, чи є компонент зі станом або без без нього, він вважається деталлю реалізації компонента, який може змінюватися з часом. Можна використовувати компоненти без стану всередині компонентів зі станом та навпаки.
\ No newline at end of file
+У додатках React, незалежно від того, чи є компонент зі станом або без нього, він вважається деталлю реалізації компонента, який може змінюватися з часом. Можна використовувати компоненти без стану всередині компонентів зі станом та навпаки.
\ No newline at end of file

From a6229c861d1be41060b32365a22eec04472f4fec Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Fri, 22 Mar 2019 12:53:04 -0400
Subject: [PATCH 10/12] Updated translation with the suggestions

---
 content/docs/state-and-lifecycle.md | 66 ++++++++++++++---------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 0df1609d2..569e4af60 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -16,8 +16,8 @@ next: handling-events.html
 function tick() {
   const element = (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {new Date().toLocaleTimeString()}.</h2>
+      <h1>Привіт, світе!</h1>
+      <h2>Це є {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
   ReactDOM.render(
@@ -39,8 +39,8 @@ setInterval(tick, 1000);
 function Clock(props) {
   return (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {props.date.toLocaleTimeString()}.</h2>
+      <h1>Привіт, світе!</h1>
+      <h2>Це є {props.date.toLocaleTimeString()}.</h2>
     </div>
   );
 }
@@ -57,7 +57,7 @@ setInterval(tick, 1000);
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-Однак, це пропускає важливу вимогу: той факт, що `Clock` встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації `Clock`.
+Однак, ми порушаємо важливу вимогу: той факт, що `Clock` встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації `Clock`.
 
 В ідеалі ми хочемо написати це один раз аби `Clock` оновлював себе сам:
 
@@ -68,7 +68,7 @@ ReactDOM.render(
 );
 ```
 
-Аби це реалізувати, нам потрібно додати "state" до компонента `Clock`.
+Аби це реалізувати, нам потрібно додати "стан"("state") до компонента `Clock`.
 
 Стан подібний до пропсів, але він приватний і повністю контролюється компонентом.
 
@@ -76,7 +76,7 @@ ReactDOM.render(
 
 ## Перетворення функції на клас {#converting-a-function-to-a-class}
 
-Ви можете перетворити функцію компоненту `Clock` на клас у п'ять кроків:
+Ви можете перетворити функцію компонента `Clock` на клас у п'ять кроків:
 
 1. Створіть клас [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) з тим же ім'ям, що наслідує `React.Component`.
 
@@ -93,8 +93,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.props.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -105,7 +105,7 @@ class Clock extends React.Component {
 
 `Clock` тепер визначається як клас, а не як функція.
 
-Метод `render` буде викликатися кожного разу, коли відбуватиметься оновлення. Але до тих пір, поки ми рендеремо `<Clock />` в той же вузол DOM, буде використано лише один екземпляр класу `Clock`. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
+Метод `render` буде викликатися кожного разу, коли відбуватиметься оновлення. Але до тих пір, поки ми рендеремо `<Clock />` в тому ж DOM-вузлі, буде використано лише один екземпляр класу `Clock`. Це дозволяє нам використовувати додаткові функції, такі як методи внутрішнього стану та життєвого циклу.
  
 ## Додавання внутрішнього стану до класу {#adding-local-state-to-a-class}
 
@@ -118,8 +118,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -138,8 +138,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -180,8 +180,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -195,15 +195,15 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Далі ми зробимо так, аби `Clock` сам налаштував свій таймер і оновлювався себе кожну секунду.
+Далі ми зробимо так, аби `Clock` сам налаштував свій таймер і оновлював себе кожну секунду.
 
 ## Додавання методів життєвого циклу до класу {#adding-lifecycle-methods-to-a-class}
 
-У додатках з багатьма компонентами, дуже важливо при знищенні компонентів вивільняти ресурси, що використовуються.
+У додатках з багатьма компонентами, дуже важливо при знищенні компонентів звільняти ресурси, що використовуються.
 
 Ми хочемо [налаштувати таймер](https://developer.mozilla.org/uk/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) кожного разу, коли `Clock` буде передано DOM вперше. У React це називається "монтування".
 
-Ми також хочемо [очистити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли створений компонентом Clock DOM видаляється. У React це називається "демонтування".
+Ми також хочемо [очистити цей таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval), коли DOM, створений компонентом Clock, видаляється. У React це називається "демонтування".
 
 Ми можемо оголосити спеціальні методи в класі компонента, які будуть викликані тоді, коли компонент монтується і демонтується:
 
@@ -225,8 +225,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -235,7 +235,7 @@ class Clock extends React.Component {
 
 Ці методи називаються "методами життєвого циклу".
 
-Метод `componentDidMount()` виконується після того, як компонентний вивід був переданий DOM. Це гарне місце для налаштування таймера:
+Метод `componentDidMount()` виконується після того, як вивід компонента був відрендерений у DOM. Це гарне місце для налаштування таймера:
 
 ```js{2-5}
   componentDidMount() {
@@ -289,8 +289,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привіт, світе!</h1>
+        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -304,15 +304,15 @@ ReactDOM.render(
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
-Тепер годинник відстукує кожну секунду.
+Тепер годинник тікає кожну секунду.
 
 Давайте швидко повторимо, що відбувається, і порядок, в якому ці методи викликаються:
 
-1) Коли `<Clock />` передається до `ReactDOM.render ()`, React викликає конструктор компонента `Clock`. Оскільки `Clock` має відображати поточний час, він ініціалізує `this.state` з з об'єктом, що включає поточний час. Пізніше ми оновимо цей стан.
+1) Коли `<Clock />` передається до `ReactDOM.render ()`, React викликає конструктор компонента `Clock`. Оскільки `Clock` має відображати поточний час, він ініціалізує `this.state` з об'єктом, що включає поточний час. Пізніше ми оновимо цей стан.
 
 2) React потім викликає `Clock` метод `render()` компонента. Ось як React дізнається, що саме має відображатися на екрані. Потім React оновлює DOM, щоб він відповідав виводу рендера `Clock`.
 
-3) Коли виведення інформації `Clock` вставляється в DOM, React викликає метод життєвого циклу `componentDidMount()`. Всередині нього компонент `Clock` просить у браузера налаштувати таймер для виклику методу компонента `tick()` один раз на секунду.
+3) Коли виведення інформації `Clock` вставляється в DOM, React викликає метод життєвого циклу `componentDidMount()`. Всередині нього компонент `Clock` просить браузер налаштувати таймер для виклику методу компонента `tick()` один раз на секунду.
 
 4) Кожну секунду браузер викликає метод `tick()`. У цьому методі компонент `Clock` планує оновлення UI, викликаючи `setState()` з об'єктом, що містить поточний час. Завдяки виклику `setState()` React знає, що стан змінився, і знову викликає метод `render()`, щоб дізнатися, що має бути на екрані. Цього разу `this.state.date` в методі `render()` буде відрізнятися і тому вивід рендера буде включати оновлений час. React оновлює DOM відповідно.
 
@@ -328,14 +328,14 @@ ReactDOM.render(
 
 ```js
 // Wrong
-this.state.comment = 'Hello';
+this.state.comment = 'Привіт';
 ```
 
 Instead, use `setState()`:
 
 ```js
 // Correct
-this.setState({comment: 'Hello'});
+this.setState({comment: 'Привіт'});
 ```
 
 Конструктор — це єдине місце, де можна присвоїти `this.state`.
@@ -391,7 +391,7 @@ this.setState(function(state, props) {
   }
 ```
 
-Тоді ви можете оновлювати їх окремо за допомогою окремих викликів `setState()`:
+Тоді ви можете оновлювати їх окремо за допомогою викликів `setState()`:
 
 ```js{4,10}
   componentDidMount() {
@@ -420,7 +420,7 @@ this.setState(function(state, props) {
 Компонент може передати свій стан вниз у якості пропсів до своїх дочірніх компонентів:
 
 ```js
-<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+<h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
 Це також працює для визначених користувачем компонентів:
@@ -433,7 +433,7 @@ this.setState(function(state, props) {
 
 ```js
 function FormattedDate(props) {
-  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
+  return <h2>Це є {props.date.toLocaleTimeString()}.</h2>;
 }
 ```
 
@@ -441,7 +441,7 @@ function FormattedDate(props) {
 
 Це зазвичай називається "зверху вниз" або "односпрямованим" потоком даних. Будь-який стан завжди належить певному компоненту і будь-які дані або UI, отримані з цього стану, можуть впливати лише на компоненти, що знаходяться "нижче" у дереві.
 
-Уявіть дерево компонентів як водоспад пропсів, де стан кожного компонента подібний до додаткового джерела води, який приєднується до нього в довільній точці, але тече й вниз.
+Уявіть дерево компонентів як водоспад пропсів, де стан кожного компонента подібний до додаткового джерела води, який приєднується до нього в довільній точці, але тече вниз.
 
 Щоб показати, що всі компоненти є дійсно ізольованими, ми можемо створити компонент `App`, який рендерить три `<Clock>`:
 

From de58f9eda3e8ef55e2bded02fef88fd5d21897f7 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Fri, 22 Mar 2019 12:58:00 -0400
Subject: [PATCH 11/12] Adding more

---
 content/docs/state-and-lifecycle.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 569e4af60..4fe487c62 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -57,7 +57,7 @@ setInterval(tick, 1000);
 
 [**Спробуйте на CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-Однак, ми порушаємо важливу вимогу: той факт, що `Clock` встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації `Clock`.
+Однак, ми порушуємо важливу вимогу: той факт, що `Clock` встановлює таймер і оновлює UI кожну секунду, має бути деталлю реалізації `Clock`.
 
 В ідеалі ми хочемо написати це один раз аби `Clock` оновлював себе сам:
 

From 3a541dbb97f1686478f0870af04faf989035d345 Mon Sep 17 00:00:00 2001
From: MargarytaChepiga <chepigamargaryta@gmail.com>
Date: Fri, 22 Mar 2019 18:06:09 -0400
Subject: [PATCH 12/12] Fix

---
 content/docs/state-and-lifecycle.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index 4fe487c62..2d205b3e8 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -17,7 +17,7 @@ function tick() {
   const element = (
     <div>
       <h1>Привіт, світе!</h1>
-      <h2>Це є {new Date().toLocaleTimeString()}.</h2>
+      <h2>Зараз {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
   ReactDOM.render(
@@ -40,7 +40,7 @@ function Clock(props) {
   return (
     <div>
       <h1>Привіт, світе!</h1>
-      <h2>Це є {props.date.toLocaleTimeString()}.</h2>
+      <h2>Зараз {props.date.toLocaleTimeString()}.</h2>
     </div>
   );
 }
@@ -94,7 +94,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.props.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.props.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -119,7 +119,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -139,7 +139,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -181,7 +181,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -226,7 +226,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -290,7 +290,7 @@ class Clock extends React.Component {
     return (
       <div>
         <h1>Привіт, світе!</h1>
-        <h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+        <h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -420,7 +420,7 @@ this.setState(function(state, props) {
 Компонент може передати свій стан вниз у якості пропсів до своїх дочірніх компонентів:
 
 ```js
-<h2>Це є {this.state.date.toLocaleTimeString()}.</h2>
+<h2>Зараз {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
 Це також працює для визначених користувачем компонентів:
@@ -433,7 +433,7 @@ this.setState(function(state, props) {
 
 ```js
 function FormattedDate(props) {
-  return <h2>Це є {props.date.toLocaleTimeString()}.</h2>;
+  return <h2>Зараз {props.date.toLocaleTimeString()}.</h2>;
 }
 ```