useId
useId 是 React 18 引入的一個內置 Hook，用于生成唯一且穩定的 ID ，
主要用于，解決在客戶端和服務器端渲染（SSR）時，動態生成 ID 可能導致的沖突問題；
特別適合用于，需要關聯 HTML 元素（如：
useId 的注意事項
-
不要在循環或條件語句內調用：
useId 必須在組件的頂層調用，否則可能導致不一致的 ID。 -
不要用于 key 屬性（除非組合使用）
useId 生成的 ID 通常較短，不適合直接作為 key（除非結合其他唯一值）。 -
與 useRef 或 useState 不同：
useId 不觸發重新渲染，也不存儲數據，僅用于生成唯一標識。
場景
-
<label htmlFor="input-id"> 和 <input id="input-id">的關聯 -
在列表中為每個項生成唯一標識（如：key 屬性）
-
在無障礙（a11y）場景下，需要唯一標識關聯元素
基本用法
import { useId } from 'react'function FormField() {const id = useId() // 生成唯一 ID，如 ":r1:"return (<div><label htmlFor={id}> Username: </label><input id={id} type="text" /></div>)
}useId() 返回一個唯一的字符串（如 ":r1:"、":r2:"）。每次調用 useId() 都會生成一個新的唯一 ID。生成的 ID 在客戶端和服務器端一致，不會導致 hydration 錯誤。
關聯 label 和 input
function LoginForm() {const usernameId = useId()const passwordId = useId()return (<form><div><label htmlFor={usernameId}> Username: </label><input id={usernameId} type="text" /></div><div><label htmlFor={passwordId}> Password: </label><input id={passwordId} type="password" /></div></form>)
}生成列表項的唯一 key
function TodoList({ items }) {return (<ul>{items.map((item) => {const id = useId() // ? 錯誤！不能在循環內調用 useIdreturn <li key={id}> {item.text} </li>})}</ul>)
}`注意`：useId 不能 在'循環' 或 '條件語句內'調用，因為它依賴于 React 的渲染順序。
正確的做法是：function TodoList({ items }) {const baseId = useId() // 在組件頂層調用return (<ul>{items.map((item, index) => (<li key={`${baseId}-${index}`}>{item.text}</li>))}</ul>)
}
