React入門 練習問題 62:フック:一意な識別子の生成
📊 Qraftユーザーの成績
- 難易度 Bランク(レーティング1200)
- 難易度 766位/2795問中
- 正答率 —(0回)
React 18から導入された`useId`フックの主な役割に関する説明として、正しいものはどれか。
- アクセシビリティ属性などを紐づけるための、コンポーネント内で一意なIDを生成する
- リストの要素をレンダリングする際に、一意のkeyプロパティを自動的に付与して管理する
- コンポーネントの再レンダリング時に、変更されたDOM要素のみを識別して高速に描画する
- データベースに新しいデータを保存する際に、バックエンドで必要な一意識別子を生成する
- 複数のブラウザタブ間で状態を共有するために、ユーザーごとに固有のセッションを作る
正解と解説を見る
正解:アクセシビリティ属性などを紐づけるための、コンポーネント内で一意なIDを生成する
`useId`フックは、アクセシビリティ属性などを紐づけるための、コンポーネント内で一意なIDを生成するのが正解です。
【正解の理由】
`<label>`の`htmlFor`属性と`<input>`の`id`属性を結びつける際などに、コンポーネントが複数回使われてもIDが重複しないよう、一意な文字列を生成する目的で`useId`を使用します。
【不正解の理由】
• 『リストの要素をレンダリングする際に、一意のkeyプロパティを自動的に付与して管理する』は誤り。`useId`はリストの`key`を生成するためには使ってはいけないと公式ドキュメントで明記されています(データ由来のIDを使うべきです)。
• 『コンポーネントの再レンダリング時に、変更されたDOM要素のみを識別して高速に描画する』は誤り。これはReactのVirtual DOM(=仮想DOM)と差分検出の仕組みそのものであり、`useId`の役割ではありません。
• 『データベースに新しいデータを保存する際に、バックエンドで必要な一意識別子を生成する』は誤り。`useId`はUIのためのID生成用であり、データベースのUUIDのような役割には適していません。
• 『複数のブラウザタブ間で状態を共有するために、ユーザーごとに固有のセッションを作る』は誤り。セッション管理はサーバーサイドやブラウザのストレージ機能で行うものであり、Reactのフックの役割ではありません。