useId

const id = useId(); // ':r0:', ':r1:' のような文字列

import { useId } from 'react';

// ── 問題: ハードコードのIDは複数使用時に衝突する ─────
// ❌ 悪い例: 同じコンポーネントを複数配置すると id が重複
function BadInput({ label }: { label: string }) {
  return (
    <div>
      <label htmlFor="my-input">{label}</label>
      <input id="my-input" /> {/* ← 2つ目を置くと id が重複！ */}
    </div>
  );
}

// ── useId: コンポーネントごとに一意なIDを生成 ─────────
function GoodInput({ label }: { label: string }) {
  // useId は毎回ユニークな ID を返す（例: :r0:, :r1:, ...）
  const id = useId();

  return (
    <div>
      {/* htmlFor と id を紐付け → クリックで input にフォーカス */}
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </div>
  );
}

// ── 1つの useId から派生 ─────────────────────────────
function Form() {
  const id = useId();
  return (
    <form>
      <label htmlFor={`${id}-name`}>名前</label>
      <input id={`${id}-name`} />
      <label htmlFor={`${id}-email`}>メール</label>
      <input id={`${id}-email`} />
    </form>
  );
}