From 73d2491eed598ede00d03840d2b09db5b57e4f7b Mon Sep 17 00:00:00 2001
From: Vitalii Burlai <vitaly.burlai@gmail.com>
Date: Fri, 19 Apr 2019 12:06:25 +0100
Subject: [PATCH 1/4] Translation of Render Props

---
 content/docs/render-props.md | 120 +++++++++++++++++------------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index e1482f491..ccb4de211 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -1,28 +1,28 @@
 ---
 id: render-props
-title: Render Props
+title: Рендер-пропси
 permalink: docs/render-props.html
 ---
 
-The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function.
+Термін [«рендер-проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) відноситься до техніки, в якій React-компоненти розділяють між собою один код (функцію) передаючи її через проп.
 
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+Компонент з рендер-проп приймає функцію, яка повертає React-елемент, і викликає її замість реалізації власної рендер-логіки.
 
 ```jsx
 <DataProvider render={data => (
-  <h1>Hello {data.target}</h1>
+  <h1>Привіт {data.target}</h1>
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) and [Downshift](https://github.com/paypal/downshift).
+Рендер-пропси використовуються, наприклад, в бібліотеках [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) та [Downshift](https://github.com/paypal/downshift).
 
-In this document, we’ll discuss why render props are useful, and how to write your own.
+В цьому документі ми розглянемо, чим корисні і як писати власні рендер-пропси.
 
-## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns}
+## Використання рендер-пропсів для наскрізних відповідальностей (Cross-Cutting Concerns) {#use-render-props-for-cross-cutting-concerns}
 
-Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.
+Компоненти – основа повторного використання коду в React. Але не завжди буває очевидно як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами що їх потребують.
 
-For example, the following component tracks the mouse position in a web app:
+Наприклад, наступний компонент відслідковує позицію курсора миші у веб додатку:
 
 ```js
 class MouseTracker extends React.Component {
@@ -42,22 +42,22 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Move the mouse around!</h1>
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        <h1>Переміщуйте курсор миші!</h1>
+        <p>Поточна позиція курсора миші: ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
 }
 ```
 
-As the cursor moves around the screen, the component displays its (x, y) coordinates in a `<p>`.
+По мірі переміщення курсора, компонент виводить його координати (x, y) всередині блоку `<p>`.
 
-Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component?
+Постає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?
 
-Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere.
+Поскільки компоненти являються базовою одиницею повторного використання коду в React, давайте спробуємо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
 
 ```js
-// The <Mouse> component encapsulates the behavior we need...
+// Компонент <Mouse> інкапсулює потрібну нам поведінку...
 class Mouse extends React.Component {
   constructor(props) {
     super(props);
@@ -76,8 +76,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...but how do we render something other than a <p>? */}
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        {/* ...але як вивести щось, окрім тегу <p>? */}
+        <p>Поточна позиція курсора миші: ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Переміщуйте курсор миші!</h1>
         <Mouse />
       </div>
     );
@@ -95,11 +95,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now the `<Mouse>` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable.
+Тепер компонент `<Mouse>` інкапсулює в собі всю поведінку, пов'язану з реагуванням на події `mousemove` та зберіганням позиції (x, y) курсора, але він поки ще не достатньо гнучкий для повторного використання.
 
-For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen.
+Наприклад, скажімо в нас є компонент `<Cat>`, який рендерить зображення кота, що ганяється за мишкою по екрану. Ми можемо використати проп `<Cat mouse={{ x, y }}>` для передачі компоненту координати миші щоб він знав де розмістити зображення на екрані.
 
-As a first pass, you might try rendering the `<Cat>` *inside `<Mouse>`'s `render` method*, like this:
+Спочатку, ви можете спробувати рендерити `<Cat>` *всередині методу `render` компонента `<Mouse>`*, наприклад так:
 
 ```js
 class Cat extends React.Component {
@@ -130,10 +130,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          We could just swap out the <p> for a <Cat> here ... but then
-          we would need to create a separate <MouseWithSomethingElse>
-          component every time we need to use it, so <MouseWithCat>
-          isn't really reusable yet.
+          Ми могли б тут просто замінити тег <p> на компонент <Cat>... але тоді
+          нам потрібно було б створювати окремий компонент <MouseWithSomethingElse>
+          кожного разу, коли він нам потрібен, тому <MouseWithCat>
+          поки що не достатньо гнучкий для повторного використання.
         */}
         <Cat mouse={this.state} />
       </div>
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Переміщуйте курсор миші!</h1>
         <MouseWithCat />
       </div>
     );
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case.
+Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли цілі – інкапсуляції поведінки з можливістю повторного використання. Тепер, кожен раз коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один `<MouseWithCat>`), який рендерить щось спеціально для цього випадку.
 
-Here's where the render prop comes in: Instead of hard-coding a `<Cat>` inside a `<Mouse>` component, and effectively changing its rendered output, we can provide `<Mouse>` with a function prop that it uses to dynamically determine what to render–a render prop.
+Ось тут нам і знадобиться рендер-проп: замість явного задавання `<Cat>` всередині компонента `<Mouse>` і зміни результату рендеру таким чином, ми можемо передавати компоненту `<Mouse>` функцію через проп (рендер-проп), яку він використає для динамічного визначення того, що потрібно рендерити.
 
 ```js
 class Cat extends React.Component {
@@ -186,8 +186,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Instead of providing a static representation of what <Mouse> renders,
-          use the `render` prop to dynamically determine what to render.
+          Замість статичного декларування того, що рендерить <Mouse>, використовуємо
+          проп `render` для динамічного визначення того, що потрібно відрендерити.
         */}
         {this.props.render(this.state)}
       </div>
@@ -199,7 +199,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Переміщуйте курсор миші!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -209,17 +209,17 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Тепер, замість того, щоб фактично клонувати компонент `<Mouse>` на жорстко задавати щось інше в його методі `render` для рішення конкретного варіанту, ми надаємо проп `render`, який `<Mouse>` може використати для динамічного визначення що він рендерить.
 
-More concretely, **a render prop is a function prop that a component uses to know what to render.**
+Більш конкретно, **рендер-проп – це фунцкія, передана через проп, яку компонент використовує щоб визначити що рендерити.**
 
-This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `<Mouse>` with a `render` prop that tells it what to render with the current (x, y) of the cursor.
+Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки, ми тепер рендеримо компонент `<Mouse>` з проп `render`, який вказує що відрендерити для поточних координат (x, y) курсора.
 
-One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
+Одна цікава річ, яку варто відзначити про рендер-пропси, полягає в тому, що ви можете реалізувати більшість [компонентів вищого порядку](/docs/higher-order-components.html) (HOC) з використанням звичайного компоненту з рендер-проп. Наприклад, якщо ви надаєте перевагу HOC `withMouse` замість компонента `<Mouse>`, ви могли б легко його створити з використанням звичайного компоненту `<Mouse>` та рендер-проп:
 
 ```js
-// If you really want a HOC for some reason, you can easily
-// create one using a regular component with a render prop!
+// Якщо вам дійсно потрібен HOC по якійсь причині, ви можете легко
+// його створити з використанням звичайного компонента і рендер-проп!
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -233,33 +233,33 @@ function withMouse(Component) {
 }
 ```
 
-So using a render prop makes it possible to use either pattern.
+Таким чином, використання рендер-проп дозволяє реалізувати будь-який з наведених вище патернів.
 
-## Using Props Other Than `render` {#using-props-other-than-render}
+## Використання пропсів, відмінних від `render` {#using-props-other-than-render}
 
-It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Важливо пам'ятати, що із назви патерну «рендер-пропси» зовсім не слідує, що для його використання ви *повинні використовувати проп з ім'ям `render`*. Насправді, [*будь-який* проп, який є функцією і використовується компонентом для визначення що рендерити технічно являється «рендер-пропом»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
-Although the examples above use `render`, we could just as easily use the `children` prop!
+Незважаючи на те, що наведені приклади використовують проп `render`, ми могли б так само легко використати проп `children`!
 
 ```js
 <Mouse children={mouse => (
-  <p>The mouse position is {mouse.x}, {mouse.y}</p>
+  <p>Поточна позиція курсора миші: {mouse.x}, {mouse.y}</p>
 )}/>
 ```
 
-And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element!
+Також запам'ятайте, що проп `children` не обов'язково повинен бути названий з списку «атрибутів» в вашому елементі JSX. Замість цього, ви можете помістити його прямо *всередину* елемента!
 
 ```js
 <Mouse>
   {mouse => (
-    <p>The mouse position is {mouse.x}, {mouse.y}</p>
+    <p>Поточна позиція курсора миші: {mouse.x}, {mouse.y}</p>
   )}
 </Mouse>
 ```
 
-You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API.
+Ви побачите, що ця техніка використовується в API бібліотеки [react-motion](https://github.com/chenglou/react-motion).
 
-Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
+Оскільки ця техніка дещо незвична, то при розробці такого API було б доречно явно вказати в `propTypes`, що проп `children` повинен бути функцією.
 
 ```js
 Mouse.propTypes = {
@@ -267,28 +267,28 @@ Mouse.propTypes = {
 };
 ```
 
-## Caveats {#caveats}
+## Застереження {#caveats}
 
-### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
+### Будьте обережні при використанні рендер-пропсів разом з React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop.
+Використання рендер-проп може звести нанівець переваги, що надає [`React.PureComponent`](/docs/react-api.html#reactpurecomponent), якщо ви створюєте функцію всередині методу `render`. Це спричинене тим, що поверхове порівняння пропсів завжди повертатиме `false` для нових пропсів, а в даному випадку кожен виклик `render` генеруватиме нове значення для рендер-проп.
 
-For example, continuing with our `<Mouse>` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this:
+Наприклад, продовжуючи з нашим вищезгаданим компонентом `<Mouse>`, якби `Mouse` наслідував `React.PureComponent` замість `React.Component`, наш приклад виглядав би наступним чином:
 
 ```js
 class Mouse extends React.PureComponent {
-  // Same implementation as above...
+  // Така ж сама реалізація, як і раніше...
 }
 
 class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Переміщуйте курсор миші!</h1>
 
         {/*
-          This is bad! The value of the `render` prop will
-          be different on each render.
+          Це погано! Значення проп `render` буде
+          різним при кожному рендері.
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -299,14 +299,14 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In this example, each time `<MouseTracker>` renders, it generates a new function as the value of the `<Mouse render>` prop, thus negating the effect of `<Mouse>` extending `React.PureComponent` in the first place!
+В цьому прикладі, при кожному рендері `<MouseTracker>`, генерується нова функція в якості значення пропу `<Mouse render>`, таким чином зводячи нанівець ефект `React.PureComponent` який `<Mouse>` наслідує!
 
-To get around this problem, you can sometimes define the prop as an instance method, like so:
+Щоб вирішити цю проблему, ви можете визначити проп як метод екземпляру, наприклад так:
 
 ```js
 class MouseTracker extends React.Component {
-  // Defined as an instance method, `this.renderTheCat` always
-  // refers to *same* function when we use it in render
+  // Визначаєм метод екземпляру, тепер `this.renderTheCat` завжди
+  // ссилається на *ту саму* функцію коли ми використовуємо її в рендері
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }
@@ -314,7 +314,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Переміщуйте курсор миші!</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `<Mouse>` should extend `React.Component` instead.
+В тих випадках, коли ви не можете статично задати проп (наприклад тому, що вам потрібно замкнути пропси та/або стан компоненту), `<Mouse>` повинно наслідувати `React.Component`.

From 36535b3c2771134b4ba2c533140aa427bcf3dc30 Mon Sep 17 00:00:00 2001
From: Vitalii Burlai <vitaly.burlai@gmail.com>
Date: Sat, 20 Apr 2019 10:58:21 +0100
Subject: [PATCH 2/4] Apply suggestions from code review

Co-Authored-By: vburlai <vitaly.burlai@gmail.com>
---
 content/docs/render-props.md | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index ccb4de211..6e7ba0cd2 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,9 +4,9 @@ title: Рендер-пропси
 permalink: docs/render-props.html
 ---
 
-Термін [«рендер-проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) відноситься до техніки, в якій React-компоненти розділяють між собою один код (функцію) передаючи її через проп.
+Термін ["рендер-проп"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) відноситься до техніки, в якій React-компоненти розділяють між собою один код (функцію) передаючи її через проп.
 
-Компонент з рендер-проп приймає функцію, яка повертає React-елемент, і викликає її замість реалізації власної рендер-логіки.
+Компонент з рендер-пропом приймає функцію, яка повертає React-елемент, і викликає її замість реалізації власної рендер-логіки.
 
 ```jsx
 <DataProvider render={data => (
@@ -14,15 +14,15 @@ permalink: docs/render-props.html
 )}/>
 ```
 
-Рендер-пропси використовуються, наприклад, в бібліотеках [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) та [Downshift](https://github.com/paypal/downshift).
+Такі бібліотеки, як [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) та [Downshift](https://github.com/paypal/downshift) використовують рендер-пропси.
 
-В цьому документі ми розглянемо, чим корисні і як писати власні рендер-пропси.
+На цій сторінці, ми розглянемо чим рендер-пропси корисні та як їх писати.
 
-## Використання рендер-пропсів для наскрізних відповідальностей (Cross-Cutting Concerns) {#use-render-props-for-cross-cutting-concerns}
+## Використання рендер-пропсів для наскрізних завдань (Cross-Cutting Concerns) {#use-render-props-for-cross-cutting-concerns}
 
-Компоненти – основа повторного використання коду в React. Але не завжди буває очевидно як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами що їх потребують.
+Компоненти — основа повторного використання коду в React. Але не завжди буває очевидно як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами, що їх потребують.
 
-Наприклад, наступний компонент відслідковує позицію курсора миші у веб додатку:
+Наприклад, наступний компонент відслідковує позицію курсора миші у веб-додатку:
 
 ```js
 class MouseTracker extends React.Component {
@@ -54,7 +54,7 @@ class MouseTracker extends React.Component {
 
 Постає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?
 
-Поскільки компоненти являються базовою одиницею повторного використання коду в React, давайте спробуємо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
+Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте спробуємо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
 
 ```js
 // Компонент <Mouse> інкапсулює потрібну нам поведінку...
@@ -153,7 +153,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли цілі – інкапсуляції поведінки з можливістю повторного використання. Тепер, кожен раз коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один `<MouseWithCat>`), який рендерить щось спеціально для цього випадку.
+Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли цілі — інкапсуляції поведінки з можливістю повторного використання. Тепер, кожен раз коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один `<MouseWithCat>`), який рендерить щось спеціально для цього випадку.
 
 Ось тут нам і знадобиться рендер-проп: замість явного задавання `<Cat>` всередині компонента `<Mouse>` і зміни результату рендеру таким чином, ми можемо передавати компоненту `<Mouse>` функцію через проп (рендер-проп), яку він використає для динамічного визначення того, що потрібно рендерити.
 
@@ -209,17 +209,17 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Тепер, замість того, щоб фактично клонувати компонент `<Mouse>` на жорстко задавати щось інше в його методі `render` для рішення конкретного варіанту, ми надаємо проп `render`, який `<Mouse>` може використати для динамічного визначення що він рендерить.
+Тепер, замість того, щоб фактично клонувати компонент `<Mouse>` та жорстко задавати щось інше в його методі `render` для рішення конкретного варіанту, ми надаємо проп `render`, який `<Mouse>` може використати для динамічного визначення що він рендерить.
 
-Більш конкретно, **рендер-проп – це фунцкія, передана через проп, яку компонент використовує щоб визначити що рендерити.**
+Більш конкретно, **рендер-проп — це фунцкія, передана через проп, яку компонент використовує, щоб визначити що рендерити.**
 
-Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки, ми тепер рендеримо компонент `<Mouse>` з проп `render`, який вказує що відрендерити для поточних координат (x, y) курсора.
+Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки, ми тепер рендеримо компонент `<Mouse>` з пропом `render`, який вказує що відрендерити для поточних координат (x, y) курсора.
 
-Одна цікава річ, яку варто відзначити про рендер-пропси, полягає в тому, що ви можете реалізувати більшість [компонентів вищого порядку](/docs/higher-order-components.html) (HOC) з використанням звичайного компоненту з рендер-проп. Наприклад, якщо ви надаєте перевагу HOC `withMouse` замість компонента `<Mouse>`, ви могли б легко його створити з використанням звичайного компоненту `<Mouse>` та рендер-проп:
+Одна цікава річ, яку варто відзначити про рендер-пропси, полягає в тому, що ви можете реалізувати більшість [компонентів вищого порядку](/docs/higher-order-components.html) (HOC) з використанням звичайного компоненту з рендер-пропом. Наприклад, якщо ви надаєте перевагу HOC `withMouse` замість компонента `<Mouse>`, ви могли б легко його створити з використанням звичайного компоненту `<Mouse>` та рендер-пропу:
 
 ```js
 // Якщо вам дійсно потрібен HOC по якійсь причині, ви можете легко
-// його створити з використанням звичайного компонента і рендер-проп!
+// його створити з використанням звичайного компонента і рендер-пропа!
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -237,7 +237,7 @@ function withMouse(Component) {
 
 ## Використання пропсів, відмінних від `render` {#using-props-other-than-render}
 
-Важливо пам'ятати, що із назви патерну «рендер-пропси» зовсім не слідує, що для його використання ви *повинні використовувати проп з ім'ям `render`*. Насправді, [*будь-який* проп, який є функцією і використовується компонентом для визначення що рендерити технічно являється «рендер-пропом»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Важливо пам'ятати, що із назви патерну "рендер-пропси" зовсім не слідує, що для його використання ви *повинні використовувати проп з ім'ям `render`*. Насправді, [*будь-який* проп, який є функцією і використовується компонентом для визначення, що рендерити технічно являється "рендер-пропом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
 Незважаючи на те, що наведені приклади використовують проп `render`, ми могли б так само легко використати проп `children`!
 
@@ -247,7 +247,7 @@ function withMouse(Component) {
 )}/>
 ```
 
-Також запам'ятайте, що проп `children` не обов'язково повинен бути названий з списку «атрибутів» в вашому елементі JSX. Замість цього, ви можете помістити його прямо *всередину* елемента!
+Також запам'ятайте, що проп `children` не обов'язково повинен бути зазначений у списку «атрибутів» у вашому JSX-елементі. Замість цього, ви можете помістити його прямо *всередину* елемента!
 
 ```js
 <Mouse>
@@ -271,7 +271,7 @@ Mouse.propTypes = {
 
 ### Будьте обережні при використанні рендер-пропсів разом з React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Використання рендер-проп може звести нанівець переваги, що надає [`React.PureComponent`](/docs/react-api.html#reactpurecomponent), якщо ви створюєте функцію всередині методу `render`. Це спричинене тим, що поверхове порівняння пропсів завжди повертатиме `false` для нових пропсів, а в даному випадку кожен виклик `render` генеруватиме нове значення для рендер-проп.
+Використання рендер-проп може звести нанівець переваги, що надає [`React.PureComponent`](/docs/react-api.html#reactpurecomponent), якщо ви створюєте функцію всередині методу `render`. Це спричинене тим, що поверхове порівняння пропсів завжди повертатиме `false` для нових пропсів, а в даному випадку кожен виклик `render` генеруватиме нове значення для рендер-пропа.
 
 Наприклад, продовжуючи з нашим вищезгаданим компонентом `<Mouse>`, якби `Mouse` наслідував `React.PureComponent` замість `React.Component`, наш приклад виглядав би наступним чином:
 
@@ -287,7 +287,7 @@ class MouseTracker extends React.Component {
         <h1>Переміщуйте курсор миші!</h1>
 
         {/*
-          Це погано! Значення проп `render` буде
+          Погано! Значення пропа `render` буде
           різним при кожному рендері.
         */}
         <Mouse render={mouse => (
@@ -299,7 +299,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-В цьому прикладі, при кожному рендері `<MouseTracker>`, генерується нова функція в якості значення пропу `<Mouse render>`, таким чином зводячи нанівець ефект `React.PureComponent` який `<Mouse>` наслідує!
+У цьому прикладі, при кожному рендері `<MouseTracker>`, генерується нова функція в якості значення пропу `<Mouse render>`, таким чином зводячи нанівець ефект `React.PureComponent` який `<Mouse>` наслідує!
 
 Щоб вирішити цю проблему, ви можете визначити проп як метод екземпляру, наприклад так:
 

From d31d87294312e4f5d570bdab636f076d95084399 Mon Sep 17 00:00:00 2001
From: Vitalii Burlai <vitaly.burlai@gmail.com>
Date: Sat, 20 Apr 2019 10:59:30 +0100
Subject: [PATCH 3/4] Apply suggestion from code review

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 6e7ba0cd2..42d3d4136 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -54,7 +54,7 @@ class MouseTracker extends React.Component {
 
 Постає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?
 
-Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте спробуємо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
+Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте зробимо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
 
 ```js
 // Компонент <Mouse> інкапсулює потрібну нам поведінку...

From a83e3d64cff2dafe54fea2bc0db93de9bd41602b Mon Sep 17 00:00:00 2001
From: Vitalii Burlai <vitaly.burlai@gmail.com>
Date: Sun, 21 Apr 2019 20:09:47 +0100
Subject: [PATCH 4/4] Apply suggestions from code review

---
 content/docs/render-props.md | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 42d3d4136..cac787241 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -16,11 +16,11 @@ permalink: docs/render-props.html
 
 Такі бібліотеки, як [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) та [Downshift](https://github.com/paypal/downshift) використовують рендер-пропси.
 
-На цій сторінці, ми розглянемо чим рендер-пропси корисні та як їх писати.
+На цій сторінці ми розглянемо чим рендер-пропси корисні та як їх писати.
 
 ## Використання рендер-пропсів для наскрізних завдань (Cross-Cutting Concerns) {#use-render-props-for-cross-cutting-concerns}
 
-Компоненти — основа повторного використання коду в React. Але не завжди буває очевидно як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами, що їх потребують.
+Компоненти — основа повторного використання коду в React. Але не завжди буває очевидно, як інкапсульовані в одному компоненті стан чи поведінку розділити з іншими компонентами, що їх потребують.
 
 Наприклад, наступний компонент відслідковує позицію курсора миші у веб-додатку:
 
@@ -52,9 +52,9 @@ class MouseTracker extends React.Component {
 
 По мірі переміщення курсора, компонент виводить його координати (x, y) всередині блоку `<p>`.
 
-Постає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?
+Виникає питання: як ми можемо повторно використати цю ж поведінку в іншому компоненті? Іншими словами, якщо інший компонент потребує знати позицію курсора, чи можемо ми якимось чином інкапсулювати цю поведінку, щоб потім легко використати її в цьому компоненті?
 
-Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте зробимо невеликий рефакторинг. Виділимо компонент `<Mouse>` який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
+Оскільки компоненти являються базовою одиницею повторного використання коду в React, давайте зробимо невеликий рефакторинг. Виділимо компонент `<Mouse>`, який інкапсулюватиме поведінку, яку б ми хотіли повторно використовувати в нашому коді.
 
 ```js
 // Компонент <Mouse> інкапсулює потрібну нам поведінку...
@@ -97,9 +97,9 @@ class MouseTracker extends React.Component {
 
 Тепер компонент `<Mouse>` інкапсулює в собі всю поведінку, пов'язану з реагуванням на події `mousemove` та зберіганням позиції (x, y) курсора, але він поки ще не достатньо гнучкий для повторного використання.
 
-Наприклад, скажімо в нас є компонент `<Cat>`, який рендерить зображення кота, що ганяється за мишкою по екрану. Ми можемо використати проп `<Cat mouse={{ x, y }}>` для передачі компоненту координати миші щоб він знав де розмістити зображення на екрані.
+Наприклад, скажімо в нас є компонент `<Cat>`, який рендерить зображення кота, що ганяється за мишкою по екрану. Ми можемо використати проп `<Cat mouse={{ x, y }}>` для передачі компоненту координати миші, щоб він знав де розмістити зображення на екрані.
 
-Спочатку, ви можете спробувати рендерити `<Cat>` *всередині методу `render` компонента `<Mouse>`*, наприклад так:
+Спочатку ви можете спробувати рендерити `<Cat>` *всередині методу `render` компонента `<Mouse>`*, наприклад так:
 
 ```js
 class Cat extends React.Component {
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли цілі — інкапсуляції поведінки з можливістю повторного використання. Тепер, кожен раз коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один `<MouseWithCat>`), який рендерить щось спеціально для цього випадку.
+Цей підхід працюватиме в нашому конкретному випадку, але ми й досі не досягли мети — інкапсуляції поведінки з можливістю повторного використання. Тепер кожен раз, коли нам потрібно отримати позицію курсора миші для різних варіантів, нам прийдеться створювати новий компонент (тобто по суті ще один `<MouseWithCat>`), який рендерить щось спеціально для цього випадку.
 
-Ось тут нам і знадобиться рендер-проп: замість явного задавання `<Cat>` всередині компонента `<Mouse>` і зміни результату рендеру таким чином, ми можемо передавати компоненту `<Mouse>` функцію через проп (рендер-проп), яку він використає для динамічного визначення того, що потрібно рендерити.
+Ось тут нам і знадобиться рендер-проп. Замість явного задавання `<Cat>` всередині компонента `<Mouse>` і зміни результату рендеру таким чином, ми можемо передавати компоненту `<Mouse>` функцію через проп (рендер-проп), яку він використає для динамічного визначення того, що потрібно рендерити.
 
 ```js
 class Cat extends React.Component {
@@ -209,16 +209,16 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Тепер, замість того, щоб фактично клонувати компонент `<Mouse>` та жорстко задавати щось інше в його методі `render` для рішення конкретного варіанту, ми надаємо проп `render`, який `<Mouse>` може використати для динамічного визначення що він рендерить.
+Тепер замість того, щоб фактично клонувати компонент `<Mouse>` та жорстко задавати щось інше в його методі `render` для рішення конкретного випадку, ми надаємо проп `render`, який `<Mouse>` може використати для динамічного визначення того, що він рендерить.
 
-Більш конкретно, **рендер-проп — це фунцкія, передана через проп, яку компонент використовує, щоб визначити що рендерити.**
+Більш конкретно, **рендер-проп — це функція, передана як проп, яку компонент використовує, щоб визначити що рендерити.**
 
-Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки, ми тепер рендеримо компонент `<Mouse>` з пропом `render`, який вказує що відрендерити для поточних координат (x, y) курсора.
+Ця техніка робить надзвичайно портативною поведінку, яку ми хотіли б використовувати повторно. Для отримання потрібної поведінки ми тепер рендеримо компонент `<Mouse>` з пропом `render`, який вказує що відрендерити для поточних координат (x, y) курсора.
 
-Одна цікава річ, яку варто відзначити про рендер-пропси, полягає в тому, що ви можете реалізувати більшість [компонентів вищого порядку](/docs/higher-order-components.html) (HOC) з використанням звичайного компоненту з рендер-пропом. Наприклад, якщо ви надаєте перевагу HOC `withMouse` замість компонента `<Mouse>`, ви могли б легко його створити з використанням звичайного компоненту `<Mouse>` та рендер-пропу:
+Одна цікава річ яку варто відзначити про рендер-пропси полягає в тому, що ви можете реалізувати більшість [компонентів вищого порядку](/docs/higher-order-components.html) (HOC) з використанням звичайного компоненту з рендер-пропом. Наприклад, якщо ви надаєте перевагу HOC `withMouse` замість компонента `<Mouse>`, ви могли б легко його створити з використанням звичайного компоненту `<Mouse>` та рендер-пропу:
 
 ```js
-// Якщо вам дійсно потрібен HOC по якійсь причині, ви можете легко
+// Якщо з певних причин вам дійсно потрібен HOC, ви можете легко
 // його створити з використанням звичайного компонента і рендер-пропа!
 function withMouse(Component) {
   return class extends React.Component {
@@ -233,11 +233,11 @@ function withMouse(Component) {
 }
 ```
 
-Таким чином, використання рендер-проп дозволяє реалізувати будь-який з наведених вище патернів.
+Таким чином, використання рендер-пропу дозволяє реалізувати будь-який з наведених вище патернів.
 
 ## Використання пропсів, відмінних від `render` {#using-props-other-than-render}
 
-Важливо пам'ятати, що із назви патерну "рендер-пропси" зовсім не слідує, що для його використання ви *повинні використовувати проп з ім'ям `render`*. Насправді, [*будь-який* проп, який є функцією і використовується компонентом для визначення, що рендерити технічно являється "рендер-пропом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Важливо пам'ятати, що із назви патерну "рендер-пропси" зовсім не слідує, що для його використання ви *повинні використовувати проп з ім'ям `render`*. Насправді [*будь-який* проп, який є функцією і використовується компонентом для визначення того, що рендерити, технічно є "рендер-пропом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
 Незважаючи на те, що наведені приклади використовують проп `render`, ми могли б так само легко використати проп `children`!
 
@@ -299,14 +299,14 @@ class MouseTracker extends React.Component {
 }
 ```
 
-У цьому прикладі, при кожному рендері `<MouseTracker>`, генерується нова функція в якості значення пропу `<Mouse render>`, таким чином зводячи нанівець ефект `React.PureComponent` який `<Mouse>` наслідує!
+У цьому прикладі при кожному рендері `<MouseTracker>`, генерується нова функція в якості значення пропу `<Mouse render>`, таким чином зводячи нанівець ефект `React.PureComponent`, який `<Mouse>` наслідує!
 
 Щоб вирішити цю проблему, ви можете визначити проп як метод екземпляру, наприклад так:
 
 ```js
 class MouseTracker extends React.Component {
-  // Визначаєм метод екземпляру, тепер `this.renderTheCat` завжди
-  // ссилається на *ту саму* функцію коли ми використовуємо її в рендері
+  // Визначаємо метод екземпляру, тепер `this.renderTheCat` завжди
+  // посилається на *ту саму* функцію, коли ми використовуємо його в рендері
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }