React 18からのAPI useIDを使おう！/ Let's Use the useID API from React 18

React Tokyo LT大会発表資料

Transcript

1. ハードコード不要 !! ID 衝突なし !! SSR 対応 !! 接頭辞の変更可 !! 　 注意点 ` リスト内keyでuseIdを使わなY ` SSR時は同一ツリーで呼び出す React 18からのAPI useId() を使おう!! 　 他ライブラリでも採用 useId() の詳細は を参照 https://ja.react.dev/reference/react/useId React 19.1からID属性値の出力結果が :xxxx: から «xxxx» へ変更された View Transition APIやCSS Anchor Positionで使用時の不具合を解消 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import from function const return label input label p p { useId } ; () { passwordHintId (); ( <> < > パスワード < type="password" aria-describedby={passwordHintId} /> </ > < id={passwordHintId}> パスワードは18文字以上の入力が必要です </ > </> ); }; 'react' PasswordField useId =