Що робить useId()?

ReactJunior~2 хв читання

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

Підсумок

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

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.