fixed issues

Author: MaksymMohyla

src/content/reference/react/useImperativeHandle.md

@@ -4,7 +4,7 @@ title: useImperativeHandle
 
 <Intro>
 
-`useImperativeHandle` це хук, який дозволяє кастомізувати об'єкт, який повертається через [реф.](/learn/manipulating-the-dom-with-refs)
+`useImperativeHandle` — це хук, який дає змогу налаштовувати дескриптор (handle) публічно доступного [рефа.](/learn/manipulating-the-dom-with-refs)
 
 ```js
 useImperativeHandle(ref, createHandle, dependencies?)
@@ -20,7 +20,7 @@ useImperativeHandle(ref, createHandle, dependencies?)
 
 ### `useImperativeHandle(ref, createHandle, dependencies?)` {/*useimperativehandle*/}
 
-Викличте `useImperativeHandle` на верхньому рівні вашого компонента, щоб кастомізувати об'єкт посилання, який повертає реф:
+Викличте `useImperativeHandle` на верхньому рівні вашого компонента, щоб налаштувати дескриптор рефа, доступного з нього:
 
 ```js
 import { useImperativeHandle } from 'react';
@@ -38,11 +38,11 @@ function MyInput({ ref }) {
 
 #### Параметри {/*parameters*/}
 
-* `ref`: `Реф`, який ви отримали як проп у компоненті `MyInput`.
+* `ref`: `ref`, який ви отримали як проп у компоненті `MyInput`.
 
-* `createHandle`: Функція, яка не приймає аргументів і повертає об'єкт посилання, який ви хочете надати. Цей об’єкт може бути будь-якого типу. Зазвичай, ви повертатимете об'єкт з методами, які ви захочете використовувати.
+* `createHandle`: Функція, яка не приймає аргументів і повертає дескриптор рефа, до якого ви хочете надати доступ. Дескриптор може бути будь-якого типу. Зазвичай, ви повертатимете об'єкт із методами, до яких ви хочете надати доступ.
 
-* **Опціональний параметр** `dependencies`: Список усіх реактивних значень, на які посилається код `createHandle`. Реактивні значення включають в себе пропси, стан та всі змінні та функції, оголошені безпосередньо в тілі компонента. Якщо ваш лінтер [налаштований для Реакту](/learn/editor-setup#linting), він перевірить, чи кожне реактивне значення вказане як залежність. Список залежностей повинен містити стале число елементів, записаних в рядок як `[залежність1, залежність2, залежність3]`. Реакт порівняє кожну залежність із своїм попереднім значенням використовуючи порівняння [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Якщо повторний рендер призвів до зміни однієї із залежностей або якщо ви пропустили даний аргумент, ваша `createHandle` функція буде виконана повторно і новостворений об'єкт посилання буде призначений до рефу.
+* **Опційний параметр** `dependencies`: Список усіх реактивних значень, на які посилається код `createHandle`. Реактивні значення охоплюють пропси, стан і всі змінні та функції, оголошені безпосередньо в тілі компонента. Якщо ваш лінтер [налаштований для React](/learn/editor-setup#linting), він перевірить, чи кожне реактивне значення вказане як залежність. Список залежностей повинен містити стале число елементів, записаних у рядок як `[залежність1, залежність2, залежність3]`. React порівняє кожну залежність із своїм попереднім значенням, використовуючи функцію [`Object.is`](https://webdoky.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Якщо повторний рендер призвів до зміни однієї із залежностей або якщо ви пропустили даний аргумент, ваша функція `createHandle` виконуватиметься повторно, і новостворений дескриптор буде призначений рефу.
 
 <Note>
 
@@ -128,9 +128,9 @@ export default function Form() {
 
   return (
     <form>
-      <MyInput placeholder="Enter your name" ref={ref} />
+      <MyInput placeholder="Введіть ваше ім'я" ref={ref} />
       <button type="button" onClick={handleClick}>
-        Edit
+        Змінити
       </button>
     </form>
   );
@@ -170,9 +170,9 @@ input {
 
 ---
 
-### Передавання власних імперативних методів {/*exposing-your-own-imperative-methods*/}
+### Надання доступу до власних імперативних методів {/*exposing-your-own-imperative-methods*/}
 
-Методи, які ви передаєте через імперативний обробник не обов'язково мають точно відповідати DOM методам. Наприклад, даний компонент `Post` передає метод `scrollAndFocusAddComment` через імперативний обробник. Це дозволяє батьківському компоненту `Page` гортати список коментарів *і* фокусуватись на полі введення, коли ви натискаєте кнопку:
+Методи, які ви передаєте через імперативний дескриптор, не обов'язково мають точно збігатися з DOM методами. Наприклад, цей компонент `Post` передає метод `scrollAndFocusAddComment` через дескриптор. Це дає батьківському компоненту `Page` змогу прогорнути список коментарів *і* фокусувати поле введення, коли ви натискаєте кнопку:
 
 <Sandpack>
 
@@ -190,7 +190,7 @@ export default function Page() {
   return (
     <>
       <button onClick={handleClick}>
-        Write a comment
+        Написати коментар
       </button>
       <Post ref={postRef} />
     </>
@@ -219,7 +219,7 @@ function Post({ ref }) {
   return (
     <>
       <article>
-        <p>Welcome to my blog!</p>
+        <p>Вітаю на моєму блозі!</p>
       </article>
       <CommentList ref={commentsRef} />
       <AddComment ref={addCommentRef} />
@@ -248,7 +248,7 @@ function CommentList({ ref }) {
 
   let comments = [];
   for (let i = 0; i < 50; i++) {
-    comments.push(<p key={i}>Comment #{i}</p>);
+    comments.push(<p key={i}>Коментар #{i}</p>);
   }
 
   return (
@@ -265,7 +265,7 @@ export default CommentList;
 import { useRef, useImperativeHandle } from 'react';
 
 function AddComment({ ref }) {
-  return <input placeholder="Add comment..." ref={ref} />;
+  return <input placeholder="Додати коментар..." ref={ref} />;
 }
 
 export default AddComment;
@@ -285,8 +285,8 @@ export default AddComment;
 
 <Pitfall>
 
-**Не зловживайте рефами.** Використовуйте рефи лише для *імперативної* поведінки, яку ви не можете виразити через пропси: наприклад, пролистування до вузла DOM, фокусування на вузлі, виклик анімації, виділення тексту тощо.
+**Не зловживайте рефами.** Використовуйте рефи лише для *імперативної* поведінки, яку ви не можете виразити через пропси: наприклад, прогортування до вузла DOM, фокусування вузла, виклик анімації, виділення тексту тощо.
 
-**Якщо ви можете виразити щось як проп, тоді не варто використовувати реф.** Наприклад, замість передачі імперативного обробника у вигляді `{ open, close }` з компоненту `Modal`, кращим підходом буде використати проп `isOpen` у такому вигляді `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) може допомогти вам задавати імперативну поведінку через пропси.
+**Якщо ви можете виразити щось як проп, тоді не варто використовувати реф.** Наприклад, замість передавання імперативного дескриптора як `{ open, close }` із компонента `Modal`, краще використати проп `isOpen` як `<Modal isOpen={isOpen} />`. [Ефекти](/learn/synchronizing-with-effects) можуть допомогти вам надати доступ до імперативних частин через пропси.
 
 </Pitfall>