React useId — アクセシブルなフォームのためのユニークID生成

useIdによるアクセシブルなID生成

useIdはサーバーとクライアントのレンダリング間で安定したユニークIDを生成します。ハイドレーションミスマッチなしにアクセシブルなフォームラベルを作成する問題を解決します。

問題

useId以前は、開発者はIDにインクリメントカウンターやMath.random()を使用していました。どちらのアプローチもサーバーサイドレンダリングでは失敗します。サーバーとクライアントが異なる値を生成し、ハイドレーションミスマッチが発生するためです。

複数IDの派生

useIdを一度呼び出し、サフィックスで関連するIDを派生させます：

function FormField({ label, hint }: { label: string; hint: string }) {
  const id = useId();
  const inputId = id + "-input";
  const hintId = id + "-hint";

  return (
    <div>
      <label htmlFor={inputId}>{label}</label>
      <input id={inputId} aria-describedby={hintId} />
      <p id={hintId}>{hint}</p>
    </div>
  );
}

useIdを使うべきでない場合

• リストキー：データの自然なキー（データベースID、ユニークな名前）を使用し、useIdではない
• CSSセレクター：生成される形式（:r0:）はCSSに適していない