Для чего нужен хук useId? Почему нельзя генерировать случайный ID?

Проблема уникальных ID особенно остро стоит в React-приложениях, которые используют серверный рендеринг (SSR).

Для чего нужен useId:

• Его основное предназначение — генерация уникальных ID для элементов HTML, которые должны быть связаны для целей доступности (a11y). Например, для связи тега <label> с элементом <input> через атрибут htmlFor / for.

• useId гарантирует, что сгенерированный ID будет одинаковым во время серверного рендеринга и на клиенте во время гидратации.

Почему случайная генерация — это плохо:

1. Несовпадение при SSR: При рендеринге на сервере генерируется HTML-документ. Если ID создается через Math.random(), сервер сгенерирует один ID (например, "input-0.12345").

2. Ошибка гидратации: Когда React на клиенте пытается "гидратировать" эту страницу (добавить обработчики событий и сделать ее интерактивной), он запустит тот же код. Math.random() сгенерирует совершенно другое значение (например, "input-0.67890").

3. Последствия: React увидит, что атрибут id элемента не совпадает с тем, что ожидалось, и выдаст ошибку гидратации. Связь между <label for="input-0.12345"> и <input id="input-0.67890"> будет broken, что ухудшит доступность и пользовательский опыт.

Пример правильного использования:

import { useId } from 'react';

function EmailForm() {
  const id = useId(); // Генерирует уникальный, стабильный ID

  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  );
}
// На сервере и клиенте сгенерируется одинаковый ID, например ":r1:"

Вывод:
Всегда используйте useId для генерации ID в React-компонентах. Это единственный способ гарантировать стабильность и согласованность между серверным и клиентским рендерингом, избегая ошибок и обеспечивая корректную доступность.