Resolved comments

Author: LeoMorgan113

src/content/reference/react/useId.md

@@ -4,7 +4,7 @@ title: useId
 
 <Intro>
 
-`useId` — це хук для генерації унікальних ID, які можуть передаватись як атрибути доступності.
+`useId` — це хук для генерації унікальних ідентифікаторів (_далі_ — ID), які можуть передаватися як атрибути доступності.
 
 ```js
 const id = useId()
@@ -16,11 +16,11 @@ const id = useId()
 
 ---
 
-## Референс {/*reference*/}
+## Опис {/*reference*/}
 
 ### `useId()` {/*useid*/}
 
-Викликайте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID:
+Викличте `useId` на верхньому рівні вашого компонента, щоб згенерувати унікальне ID:
 
 ```js
 import { useId } from 'react';
@@ -34,34 +34,33 @@ function PasswordField() {
 
 #### Параметри {/*parameters*/}
 
-`useId` не приймає ніяких параметрів.
+`useId` не приймає жодних параметрів.
 
 #### Результат {/*returns*/}
 
-`useId` повертає унікальну ID строку, пов'язану з конкретним запитом `useId` в цьому конкретному компоненті.
+`useId` повертає унікальну ID-стрічку, пов'язану з конкретним запитом `useId` в цьому конкретному компоненті.
 
 #### Застереження {/*caveats*/}
 
-* `useId` — це хук, тож він може викликатись тільки **на верхньому рівні вашого компонента** або у вашому власному хуці. Ви не можете викликати його в циклах або умовах. Якщо ж є така потреба, то витягніть новий компонент та перемістіть в нього стан.
+* `useId` — це хук, тож він може викликатися тільки **на верхньому рівні вашого компонента** або у ваших власних хуках. Ви не можете викликати його в циклах або умовно. Якщо ж є така потреба, то виокреміть новий компонент та перемістіть у нього стан.
 
-* `useId` **не повинно використовуватись для генерації ключів** у списках. [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key)
+* `useId` **не має використовуватися для генерації ключів** у списках. [Ключі мають генеруватися з ваших даних.](/learn/rendering-lists#where-to-get-your-key)
 
-* `useId` наразі не може бути використано в [async Server Components](/reference/rsc/server-components#async-components-with-server-components).
+* `useId` наразі не може бути використано в [асинхронних серверних компонентах](/reference/rsc/server-components#async-components-with-server-components).
 
 ---
 
 ## Використання {/*usage*/}
 
 <Pitfall>
 
-**Не викликайте `useId` для генерації ключів у списку.** [Ключі повинні генеруватись з ваших даних.](/learn/rendering-lists#where-to-get-your-key)
-
+**Не викликайте `useId` для генерації ключів у списку.** [Ключі мають генеруватися з ваших даних.](/learn/rendering-lists#where-to-get-your-key)
 
 </Pitfall>
 
 ### Генерація унікальних ID для атрибутів доступності {/*generating-unique-ids-for-accessibility-attributes*/}
 
-Викликайте `useId` на верхньому рівні вашої компоненти для генерації унікального ID:
+Викличте `useId` на верхньому рівні вашого компонента для генерації унікального ID:
 
 ```js [[1, 4, "passwordHintId"]]
 import { useId } from 'react';
@@ -71,7 +70,7 @@ function PasswordField() {
   // ...
 ```
 
-Далі ви можете передати <CodeStep step={1}>Згеренрувати ID</CodeStep> до різних атрибутів:
+Далі ви можете передати <CodeStep step={1}>згенерований ID</CodeStep> до різних атрибутів:
 
 ```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
 <>
@@ -82,9 +81,9 @@ function PasswordField() {
 
 **Розглянемо приклади, коли це може бути корисно.**
 
-[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) такі як [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дозволяють зазначити, що два теги пов'язані один з одним. Наприклад, ви можете визначити, що елемент (таким як input) описаний іншим компонентом (таким як параграф).
+[Атрибути доступності HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), як-от [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), дають змогу зазначити, що два теги пов'язані один з одним. Наприклад, ви можете зазначити, що елемент (як-от input) описаний іншим компонентом (як-от параграф).
 
-В звичайному HTML, ви би написали наступне:
+У звичайному HTML ви би написали наступне:
 
 ```html {5,8}
 <label>
@@ -95,11 +94,11 @@ function PasswordField() {
   />
 </label>
 <p id="password-hint">
-  The password should contain at least 18 characters
+    Довжина паролю має бути не менш ніж 18 символів
 </p>
 ```
 
-Однак, такий хардкод ID не найкраща практика в React. Компонент може бути зарендерений на сторінці більш ніж один раз — але ID повинні бути унікальні! Замість того, щоб хардкодити ID, згенеруйте унікальне за допомогою  `useId`:
+Однак, таке задання ID не найкраща практика в React. Компонент може бути відрендерений на сторінці більш ніж один раз — і ID повинні бути унікальні! Замість незмінно заданих ID, згенеруйте унікальне значення за допомогою `useId`:
 
 ```js {4,11,14}
 import { useId } from 'react';
@@ -116,7 +115,7 @@ function PasswordField() {
         />
       </label>
       <p id={passwordHintId}>
-        Пароль повинен бути довжиною не меньш ніж 18 символів
+          Довжина паролю має бути не менш ніж 18 символів
       </p>
     </>
   );
@@ -142,7 +141,7 @@ function PasswordField() {
         />
       </label>
       <p id={passwordHintId}>
-        Пароль повинен бути довжиною не меньш ніж 18 символів
+          Довжина паролю має бути не менш ніж 18 символів
       </p>
     </>
   );
@@ -151,7 +150,7 @@ function PasswordField() {
 export default function App() {
   return (
     <>
-      <h2>Оберіть пароль</h2>
+      <h2>Введіть пароль</h2>
       <PasswordField />
       <h2>Підтвердіть пароль</h2>
       <PasswordField />
@@ -170,29 +169,29 @@ input { margin: 5px; }
 
 <Pitfall>
 
-Разом з [серверним рендерінгом](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонент на сервері та на клієнті**. Якщо дерева, які ви рендерите на сервері та на клієнті не збігаються, то і згенеровані ID не будуть збігатись.
+Для [серверного рендерингу](/reference/react-dom/server), **`useId` потребує ідентичного дерева компонентів на сервері та на клієнті**. Якщо дерева, які ви рендерите на сервері та на клієнті, не збігаються, то і згенеровані ID не будуть збігатись.
 
 </Pitfall>
 
 <DeepDive>
 
 #### Чому використання useId краще за інкрементний лічильник? {/*why-is-useid-better-than-an-incrementing-counter*/}
 
-Ви можливо зацікавились, чому використання `useId` краще за інкрементацію глобальної змінної, як наприклад `nextId++`.
+Можливо, вам кортить дізнатися, чому використання `useId` краще за інкрементування глобальної змінної, як наприклад, `nextId++`.
 
-Початкова перевага в тому, що `useId` React запевняється, що це працює разом із [серверним рендерінгом.](/reference/react-dom/server) Протягом серверного рендерінга, ваш компонент генерує HTML вивід. Пізніше, на стороні клієнта, [гідратація](/reference/react-dom/client/hydrateRoot) прикрипляє обробники подій до згенерованого HTML. Для роботи гідратації, клієнтський вивід має збігатись з серверним HTML.
+Початкова перевага `useId` в тому, що React запевниться, що це працює разом із [серверним рендерингом.](/reference/react-dom/server) Протягом серверного рендерингу, ваш компонент генерує HTML-вивід. Далі на клієнті [гідрація](/reference/react-dom/client/hydrateRoot) прикріплює обробники подій до згенерованого HTML. Для коректної роботи гідрації, клієнтський вивід має збігатись із серверним HTML.
 
-Це складно гарантувати з інкрементацією лічильника, бо порядок в якому Клієнтські Компоненти проходять гідратацію не збігається з порядком в якому серверний HTML був додан. Викликаючи `useId`, ви запевняєтесь, що гідратація буде працювати, та серверний і клієнтський виводи будуть збігатись.
+Це складно гарантувати для інкрементного лічильника, бо порядок, за яким клієнтські компоненти проходять гідрацію не збігається з порядком за яким був виданий серверний HTML. Викликаючи `useId`, ви запевняєтеся, що гідрація буде працювати, а серверний і клієнтський виводи будуть збігатися.
 
-В межах React, `useId` генерується з "батьківського шляху" компоненти, що викликана. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатись не дивлячись на порядок рендерінгу.
+У межах React, `useId` генерується з "батьківського шляху" компонента, що його викликав. Ось чому, якщо клієнтське та серверне дерево однакове, "батьківський шлях" буде збігатися, незважаючи на порядок рендерингу.
 
 </DeepDive>
 
 ---
 
-### Генерація ID для декількох залежних елементів {/*generating-ids-for-several-related-elements*/}
+### Генерація ID для декількох пов'язаних елементів {/*generating-ids-for-several-related-elements*/}
 
-Якщо треба додати ID для декількох залежних елементів, ви можете викликати `useId` для генерації спільного префіксу: 
+Якщо треба додати ID для декількох пов'язаних елементів, ви можете викликати `useId` для генерації спільного префіксу: 
 
 <Sandpack>
 
@@ -203,11 +202,11 @@ export default function Form() {
   const id = useId();
   return (
     <form>
-      <label htmlFor={id + '-ім_я'}>Ім'я:</label>
-      <input id={id + '-ім_я'} type="text" />
+      <label htmlFor={id + '-name'}>Ім'я:</label>
+      <input id={id + '-name'} type="text" />
       <hr />
-      <label htmlFor={id + '-прізвище'}>Прізвище:</label>
-      <input id={id + '-прізвище'} type="text" />
+      <label htmlFor={id + '-lastName'}>Прізвище:</label>
+      <input id={id + '-lastName'} type="text" />
     </form>
   );
 }
@@ -219,20 +218,20 @@ input { margin: 5px; }
 
 </Sandpack>
 
-Це дозволить запобігти виклику `useId` для кожного окремого елементу, якому треба унікальне ID.
+Це дасть змогу виклику `useId` для кожного окремого елементу, якому треба унікальне ID.
 
 ---
 
-### Визначення спільного префіксу для всіх згенерованих ID {/*specifying-a-shared-prefix-for-all-generated-ids*/}
+### Визначення спільного префікса для всіх згенерованих ID {/*specifying-a-shared-prefix-for-all-generated-ids*/}
 
-Якщо ви рендерите декілька незалежних React застосунків на одній сторінці, передавайте `identifierPrefix` як опцію у ваш виклик [`createRoot`](/reference/react-dom/client/createRoot#parameters) або [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Це забезпечить те, що ID, згенеровані двома різними застосунками, ніколи не перетнуться, бо кожен ідентифікатор згенерований за допомогою `useId` починається з окремого префіксу, який ви вказали.
+Якщо ви рендерите декілька незалежних React-застосунків на одній сторінці, передавайте `identifierPrefix` як опцію до вашого [`createRoot`](/reference/react-dom/client/createRoot#parameters) або [`hydrateRoot`](/reference/react-dom/client/hydrateRoot). Це забезпечить те, що ID, згенеровані двома різними застосунками, ніколи не перетнуться, бо кожен ідентифікатор, згенерований за допомогою `useId`, починатиметься з окремого префіксу, який ви вказали.
 
 <Sandpack>
 
 ```html public/index.html
 <!DOCTYPE html>
 <html>
-  <head><title>Мій додаток</title></head>
+  <head><title>Мій застосунок</title></head>
   <body>
     <div id="root1"></div>
     <div id="root2"></div>
@@ -245,7 +244,7 @@ import { useId } from 'react';
 
 function PasswordField() {
   const passwordHintId = useId();
-  console.log('Згенеруй ідентифікатор:', passwordHintId)
+  console.log('Згенерований ідентифікатор:', passwordHintId)
   return (
     <>
       <label>
@@ -256,7 +255,7 @@ function PasswordField() {
         />
       </label>
       <p id={passwordHintId}>
-          Пароль повинен бути довжиною не меньш ніж 18 символів
+          Довжина паролю має бути не менш ніж 18 символів
       </p>
     </>
   );
@@ -308,9 +307,9 @@ input { margin: 5px; }
 
 ---
 
-### Використання однакового ID префікса для клієнта та сервера {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
+### Використання однакового ID-префікса на клієнті та сервері {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
 
-Якщо ви [рендерите декілька незалежних React застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, запевниться, що `identifierPrefix`, який ви передаєте в [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) викликається на клієнтській стороні, так само як `identifierPrefix`, який ви передаєте в [server APIs](/reference/react-dom/server), наприклад [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
+Якщо ви [рендерите декілька незалежних React-застосунків на одній сторінці](#specifying-a-shared-prefix-for-all-generated-ids), і деякі з цих застосунків відрендерені сервером, перевірте, що `identifierPrefix`, який ви передаєте до [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) на клієнті, є тим самим `identifierPrefix`, який ви передаєте до [серверних APIs](/reference/react-dom/server), наприклад, [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
 
 ```js
 // Server
@@ -334,4 +333,4 @@ const root = hydrateRoot(
 );
 ```
 
-Немає потреби передавати `identifierPrefix`, якщо ви маєте тільки один React застосунок на сторінці.
+Немає потреби передавати `identifierPrefix`, якщо ви маєте тільки один React-застосунок на сторінці.