Що таке hook useId у React?

Що таке useId?

useId — це хук React 18+, який генерує унікальні, стабільні ID, що є послідовними між рендерингом на сервері та клієнті. Він призначений для зв'язування HTML-елементів (наприклад, міток форм з полями вводу) без викликання невідповідностей гідратації SSR.

Основне використання

tsx

import { useId } from "react";

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

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

Проблема, яку вирішує useId

Без useId (невідповідність SSR)

tsx

// ❌ Випадкові ID викликають невідповідність гідратації SSR
function Input({ label }: { label: string }) {
  const id = Math.random().toString(36); // Різні на сервері та клієнті!

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </div>
  );
}
// Попередження: Проп `id` не збігається. Сервер: "abc123" Клієнт: "xyz789"

З useId (послідовно)

tsx

// ✅ useId генерує той самий ID на сервері та клієнті
function Input({ label }: { label: string }) {
  const id = useId(); // Те саме значення на сервері та клієнті

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </div>
  );
}

Кілька ID з одного хуку

tsx

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

  return (
    <form>
      <div>
        <label htmlFor={`${id}-name`}>Name:</label>
        <input id={`${id}-name`} />
      </div>
      <div>
        <label htmlFor={`${id}-email`}>Email:</label>
        <input id={`${id}-email`} type="email" />
      </div>
      <div>
        <label htmlFor={`${id}-password`}>Password:</label>
        <input id={`${id}-password`} type="password" />
      </div>
    </form>
  );
}

ARIA атрибути

tsx

function Tooltip({ text, children }: { text: string; children: React.ReactNode }) {
  const id = useId();

  return (
    <div>
      <div aria-describedby={id}>{children}</div>
      <div role="tooltip" id={id}>{text}</div>
    </div>
  );
}

Важливі правила

Не використовуйте useId для ключів списків — використовуйте ключі на основі даних
Не використовуйте його для CSS селекторів — згенерований формат (:r1:) не є безпечним для CSS
Викликайте його на верхньому рівні вашого компонента (стандартні правила хуків)
Кожен виклик генерує унікальний ID в межах компонента

tsx

// ❌ НЕ використовуйте useId для ключів
{items.map(item => <li key={useId()}>...</li>)} // НЕПРАВИЛЬНО!

// ✅ Використовуйте ключі на основі даних
{items.map(item => <li key={item.id}>...</li>)}

Важливо:

useId генерує унікальні ID, безпечні для SSR для атрибутів доступності (htmlFor, aria-describedby тощо). Використовуйте один виклик useId з суфіксами для кількох пов'язаних ID. Не використовуйте його для ключів списків або CSS селекторів.

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

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

Premium

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

Дочитали статтю?

Практика завдань