Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить useId()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `useId()`

`useId()` генерує **унікальний, стабільний ID**,
який залишається однаковим між рендерами і між **сервером і клієнтом**.

> Простіше кажучи:
> `useId()` - це спосіб отримати безпечний `id`,
> який можна використовувати для `htmlFor`, `aria-labelledby`, ключів тощо.
> React гарантує, що ці ID не "зламаються" при SSR або оновленнях.

---

## Синтаксис

```javascript
const id = useId();
```

Повертає **рядок**, наприклад:

```javascript
"id:abc-123"
```

---

## Приклад використання

```javascript
import { useId } from "react";

function EmailField() {
  const id = useId();

return (
    <div>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </div>
  );
}
```

React згенерує унікальний `id` на кшталт `"r1:0"`,
і цей `id` буде **однаковим** при серверному та клієнтському рендері.

Тобто - жодних конфліктів між елементами при гідратації (що було болем до React 18).

---

## Чому це важливо (особливо при SSR)

Раніше розробники писали так:

```javascript
const id = Math.random().toString(36).slice(2);
```

Проблема:

- На **сервері** та **клієнті** генерувалися різні значення.
- React не міг "зіставити" HTML, і гідратація ламалася:

```javascript
  Warning: Prop `id` did not match. Server: "abc" Client: "xyz"
  ```

`useId()` вирішує це:

- React сам гарантує, що `id` **синхронізований** між сервером і клієнтом.
- Він також **унікальний в усьому дереві компонентів**.

---

## Як виглядає ID

React генерує рядки приблизно такого вигляду:

```javascript
r0:1
r1:2
r3:0
```

- `r0`, `r1` - унікальні префікси дерева компонентів.
- `:0`, `:1` - номери елементів.

Ці ID не перетинаються між компонентами.

---

## Приклад: група пов'язаних елементів

Якщо потрібно створити кілька пов'язаних `id`,
можна використати один `useId` і додавати суфікси вручну:

```javascript
function CheckboxGroup() {
  const baseId = useId();

return (
    <div>
      <input type="checkbox" id={`${baseId}-a`} />
      <label htmlFor={`${baseId}-a`}>Option A</label>

<input type="checkbox" id={`${baseId}-b`} />
      <label htmlFor={`${baseId}-b`}>Option B</label>
    </div>
  );
}
```

React гарантує, що `baseId` буде стабільним і унікальним,
тому ти можеш безпечно будувати на його основі інші ідентифікатори.

---

## Можна використовувати у списках

```javascript
function Items({ list }) {
  const baseId = useId();

return (
    <ul>
      {list.map((item, i) => (
        <li key={i} id={`${baseId}-${i}`}>
          {item}
        </li>
      ))}
    </ul>
  );
}
```

Кожен елемент отримає стабільний `id`,
і React не переплутає їх при SSR.

---

## Важливо пам'ятати

| Особливість | Пояснення |
|---|---|
| Генерує **унікальний, стабільний id** | Не змінюється між рендерами |
| Безпечний для SSR | Збігається між сервером і клієнтом |
| Не можна використовувати в циклах для `key` | ID не призначений для React-ключів |
| Краще не використовувати як динамічні ідентифікатори (наприклад, з бази) | Це для внутрішнього UI, не для даних |
| Не можна викликати в умові | Як і всі хуки - тільки на верхньому рівні функції |

---

## Коли використовувати `useId()`

| Коли | Навіщо |
|---|---|
| Для зв'язок `htmlFor` та `id` | <label> і <input> повинні мати однаковий id |
| Для ARIA-атрибутів | `aria-labelledby`, `aria-describedby` |
| Для автогенерації унікальних ідентифікаторів в UI | Акордеони, форми, tooltips |
| Не для ключів (`key` у списках) | Ключі потрібні React, а не DOM |

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Що робить `useId()` | Генерує унікальний і стабільний ID для елементів |
| Коли використовувати | Коли потрібно безпечно зв'язати `label` і `input`, `aria`-атрибути тощо |
| Чому важливий | Дозволяє уникнути конфліктів при серверному рендерингу (SSR) |
| Не можна використовувати для | `key` у списках, ідентифікаторів з бази даних |

---

**Головна ідея:**

> `useId()` потрібен, щоб безпечно генерувати унікальні і стабільні ID,
> які однакові на сервері і клієнті - без "розсинхронізації".

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати575 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.