React

useId для генерации уникальных ID

В React 18 появится новый хук для генерации уникальных id. Этот хук можно использовать для связки названия и инпута:


function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input type="checkbox" name="react" id={id} />
    </>
  );
);

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

Для генерации уникальных id в хуке useId используется текущая позиция компонента в дереве приложения. Внутри React, id представляет из себя двоичное число. Для дочерних элементов добавляются дополнительные биты слева от последовательности родителя, которые представляет положение дочернего элемента на текущем уровне дочерних элементов.


     00101              00010001011010101
    ╰──┬──╯            ╰────────┬────────╯
  Fork 5 of 20            id родителя

Это позволяет быть уверенным, что каждый вызов useId будет возвращать уникальный id. Если в компоненте несколько лейблов и инпутов, то можно добавить локальные префиксы, что гарантирует уникальность id глобально:


function NameFields() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id + '-firstName'}>First Name</label>
      <div>
        <input id={id + '-firstName'} type="text" />
      </div>
      <label htmlFor={id + '-lastName'}>Last Name</label>
      <div>
        <input id={id + '-lastName'} type="text" />
      </div>
    </div>
  );
}

Хотя так делать не обязательно, если несколько раз вызвать useId в одном компоненте, то каждый из них вернёт свой уникальный id.

https://github.com/reactwg/react-18/discussions/111

✍️ @React_lib

GitHub

Intent to Ship: useId · reactwg/react-18 · Discussion #111

This feature is now available in the latest alphas facebook/react#22644 useId is an API for generating unique IDs on both the client and server, while avoiding hydration mismatches. We haven't ...

3.5K views06:47