Finished translatio of Profiler page

Author: GeorgeShvab

Diff for: src/content/reference/react/Profiler.md

@@ -4,7 +4,7 @@ title: <Profiler>
 
 <Intro>
 
-`<Profiler>` lets you measure rendering performance of a React tree programmatically.
+`<Profiler>` дає вам змогу програмно вимірювати продуктивність рендеру React-дерева.
 
 ```js
 <Profiler id="App" onRender={onRender}>
@@ -18,55 +18,55 @@ title: <Profiler>
 
 ---
 
-## Reference {/*reference*/}
+## Опис {/*reference*/}
 
 ### `<Profiler>` {/*profiler*/}
 
-Wrap a component tree in a `<Profiler>` to measure its rendering performance.
+Обгорніть дерево компонентів у `<Profiler>`, щоб виміряти продуктивність його рендеру.
 
 ```js
 <Profiler id="App" onRender={onRender}>
   <App />
 </Profiler>
 ```
 
-#### Props {/*props*/}
+#### Пропси {/*props*/}
 
-* `id`: A string identifying the part of the UI you are measuring.
-* `onRender`: An [`onRender` callback](#onrender-callback) that React calls every time components within the profiled tree update. It receives information about what was rendered and how much time it took.
+* `id`: Стрічковий ідентифікатор тієї частини UI, продуктивність якої ви вимірюєте.
+* `onRender`: [Функція зворотного виклику `onRender`](#onrender-callback), яку React викликає щоразу, коли компоненти всередині профільованого дерева оновлюються. Вона отримує інформацію про те, що було відрендерено і скільки часу це зайняло.
 
-#### Caveats {/*caveats*/}
+#### Застереження {/*caveats*/}
 
-* Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+* Профілювання створює додаткове навантаження, тому **початково воно вимкнене у збірці для впровадження (production).** Щоб профілювати у публічному середовищі, потрібно скористатися [спеціальною збіркою для впровадження з увімкненим профілюванням.](https://fb.me/react-profiling)
 
 ---
 
-### `onRender` callback {/*onrender-callback*/}
+### Функція зворотного виклику `onRender` {/*onrender-callback*/}
 
-React will call your `onRender` callback with information about what was rendered.
+React викличе вашу функцію зворотного виклику `onRender` з інформацією про те, що було відрендерено.
 
 ```js
 function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
-  // Aggregate or log render timings...
+  // Зберіть або виведіть дані про тривалість рендеру...
 }
 ```
 
-#### Parameters {/*onrender-parameters*/}
+#### Параметри {/*onrender-parameters*/}
 
-* `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
-* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or Hooks.
-* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
-* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
-* `startTime`: A numeric timestamp for when React began rendering the current update.
-* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
+* `id`: Стрічковий проп `id` дерева `<Profiler>`, яке щойно було внесено (committed). Він дає вам змогу визначити, яку саме частину дерева було внесено, якщо ви використовуєте кілька профілювачів.
+* `phase`: `"mount"`, `"update"` або `"nested-update"`. Дає змогу дізнатися, чи дерево було щойно змонтовано вперше або ж рендерено повторно через зміни в стані, пропсах чи хуках.
+* `actualDuration`: Кількість мілісекунд, витрачених на рендеринг компонента `<Profiler>` і його дочірніх компонентів під час поточного оновлення. Вказує на те, наскільки ефективно піддерево використовує мемоїзацію (наприклад, [`memo`](/reference/react/memo) і [`useMemo`](/reference/react/useMemo)). В ідеалі, це значення повинно значно зменшитися після першого монтування, оскільки багато з дочірніх компонентів буде перерендерюватися лише за зміни пропсів.
+* `baseDuration`: Кількість мілісекунд, яка відображає, скільки часу займе повторний рендер усього піддерева компонента `<Profiler>` без будь-якої оптимізації. Це значення розраховується як сума часу останніх рендерів кожного компонента в дереві. Воно показує найгірший сценарій рендерингу (наприклад, перше монтування або дерево без мемоїзації). Порівняйте `actualDuration` з ним, щоби перевірити, чи працює мемоїзація.
+* `startTime`: Числове значення, яке вказує на момент часу, коли React почав рендеринг поточного оновлення.
+* `commitTime`: Числове значення, яке вказує на момент часу, коли React вніс поточне оновлення. Це значення однакове в усіх профілювачів у коміті, що дає змогу згрупувати їх за потреби.
 
 ---
 
-## Usage {/*usage*/}
+## Використання {/*usage*/}
 
-### Measuring rendering performance programmatically {/*measuring-rendering-performance-programmatically*/}
+### Програмне вимірювання продуктивності рендерингу {/*measuring-rendering-performance-programmatically*/}
 
-Wrap the `<Profiler>` component around a React tree to measure its rendering performance.
+Обгорніть компонент `<Profiler>` навколо React-дерева, щоб визначити продуктивність його рендеру.
 
 ```js {2,4}
 <App>
@@ -77,25 +77,25 @@ Wrap the `<Profiler>` component around a React tree to measure its rendering per
 </App>
 ```
 
-It requires two props: an `id` (string) and an `onRender` callback (function) which React calls any time a component within the tree "commits" an update.
+Він потребує двох пропсів: `id` (стрічка) і функцію зворотного виклику `onRender`, яку React викличе, коли будь-який компонент всередині дерева "закомітить" (внесе) оновлення.
 
 <Pitfall>
 
-Profiling adds some additional overhead, so **it is disabled in the production build by default.** To opt into production profiling, you need to enable a [special production build with profiling enabled.](https://fb.me/react-profiling)
+* Профілювання створює додаткове навантаження, тому **початково воно вимкнене у збірці для впровадження (production).** Щоб профілювати у публічному середовищі, потрібно скористатися [спеціальною збіркою для впровадження з увімкненим профілюванням.](https://fb.me/react-profiling)
 
 </Pitfall>
 
 <Note>
 
-`<Profiler>` lets you gather measurements programmatically. If you're looking for an interactive profiler, try the Profiler tab in [React Developer Tools](/learn/react-developer-tools). It exposes similar functionality as a browser extension.
+`<Profiler>` дає вам змогу збирати показники програмно. Якщо ви шукаєте інтерактивний профілювач, спробуйте вкладку Profiler в [Інструментах React розробника](/learn/react-developer-tools). Вона надає подібний функціонал як розширення для браузера.
 
 </Note>
 
 ---
 
-### Measuring different parts of the application {/*measuring-different-parts-of-the-application*/}
+### Вимірювання продуктивності різних частин застосунку {/*measuring-different-parts-of-the-application*/}
 
-You can use multiple `<Profiler>` components to measure different parts of your application:
+Ви можете використовувати кілька компонентів `<Profiler>`, щоб виміряти продуктивність різних частин вашого застосунку:
 
 ```js {5,7}
 <App>
@@ -108,7 +108,7 @@ You can use multiple `<Profiler>` components to measure different parts of your
 </App>
 ```
 
-You can also nest `<Profiler>` components:
+Ви також можете вкладувати компоненти `<Profiler>`:
 
 ```js {5,7,9,12}
 <App>
@@ -126,7 +126,7 @@ You can also nest `<Profiler>` components:
 </App>
 ```
 
-Although `<Profiler>` is a lightweight component, it should be used only when necessary. Each use adds some CPU and memory overhead to an application.
+Хоча `<Profiler>` є легким компонентом, його слід використовувати лише за необхідності. Кожне його використання додає певне навантаження на CPU та пам’ять вашого застосунку.
 
 ---