目次
ReactのuseId()とは
ReactのuseId()はアクセシブルなフォーム要素の紐付けなどのためのユニークな ID を生成する便利なHooksです。
App.tsx
import { useId } from "react";
function App () {
const myId = useId()
const myId2 = useId()
console.log(myId)
// _r_0_
console.log(myId2)
// _r_1_
}便利な機能ですが、あまり知られていない3つの問題があるので、使用する際は注意が必要です。
1. React v18以降でないと使用不可
ReactのuseId()はバージョン18以降でないと使用できません。
idを返すだけという単純な機能なので、だいぶ前から存在していると勘違いして古い環境で使用してしまうケースがあります。
2. React v18だとコロン(:)が使用される
React v18だと「_」ではなく「:」が使用されています。(例: 「:r0:」)
React v18からv19以上にアップデートした際に返ってくるidが変わって、これが原因で不具合が発生する可能性があるので注意が必要です。
3. useId()が返すのは連番ではない
useId()を使うたびに「_r_0_」、「_r_1_」のように1ずつ増えていくので、10進数の連番で増えると誤解されていることがあります。
実際は10進数の連番ではなく、32進数の連番で増えていきます。
- 数字：
0〜9（10個） - アルファベット：
a〜v（22個）
つまり、以下の順で表示されます。
_r_0_, _r_1_, _r_2_, _r_3_, _r_4_, _r_5_, _r_6_, _r_7_, _r_8_, _r_9_, _r_a_, _r_b_, _r_c_, _r_d_, _r_e_, _r_f_, _r_g_, _r_h_, _r_i_, _r_j_, _r_k_, _r_l_, _r_m_, _r_n_, _r_o_, _r_p_, _r_q_, _r_r_, _r_s_, _r_t_, _r_u_, _r_v_, _r_10_, _r_11_, _r_12_, …
React v18以下はuseid-polyfillを推奨
React v18以下はuseid-polyfillを使えばReact v19と同じようにuseId()が使えるので、こちらを使うことを推奨します。
npm i useid-polyfillApp.tsx
import { useId } from 'useid-polyfill'
function ListUseId() {
const currentId = useId()
return <p>{currentId}</p>
}
function App() {
return (
<div>
<h1>React useId() sample</h1>
{Array.from({ length: 100 }, (_, i) => (
<ListUseId key={i} />
))}
</div>
)
}
export default App
