Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

React Tokyo LT大会発表資料

Avatar for Okuto Oyama

Okuto Oyama

May 16, 2025
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

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 =