useId

公式ドキュメント ↗

function LabeledField({ label }: { label: string }) {
  const id = useId(); // 呼ぶたびに一意な値
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

1つのuseIdから、複数のidを作る

function AddressFields() {
  const id = useId(); // 1回だけ呼ぶ
  return (
    <>
      <label htmlFor={`${id}-postal`}>郵便番号</label>
      <input id={`${id}-postal`} />
      <label htmlFor={`${id}-city`}>市区町村</label>
      <input id={`${id}-city`} />
    </>
  );
}

1つのコンポーネントに複数の入力欄がある場合は、useId()を1回だけ呼んで、名前を付け足して使い分けるのが定石。入力欄の数だけ呼ぶ必要はない。

実際の使いどころ: aria属性とのひも付け

<input id={`${id}-input`} aria-describedby={`${id}-hint`} />
<p id={`${id}-hint`}>8文字以上、数字を1つ以上含めてください</p>

label/input以外にも、aria-describedbyのような「説明文とのひも付け」全般で同じ理由から使われる。モーダル・アコーディオン・フォーム部品など、使い回すことを前提にしたUI部品を作るときにはほぼ必須。さらにuseId()はサーバーとクライアントで同じ値になるので、Math.random()や連番カウンタで起きがちな「表示のズレ（ハイドレーション不一致）」も起きない。