React useId 如何生成稳定的唯一 ID？

Question

仓乃文 · Accepted Answer

在 SSR 场景下用 Math.random() 或 Date.now() 生成 ID 会导致服务端和客户端不匹配（hydration mismatch）。useId 生成在服务端和客户端一致的稳定唯一 ID，专门用于 accessibility 属性和表单关联。表单关联场景： ```javascript function FormField({ label }) { const id = useId(); // 生成稳定的唯一 ID return (

{label}

); } ``` 多 ID 场景（用冒号分隔）： ```javascript function DatePicker() { const id = useId(); return ( <> 开始日期结束日期 ); } ``` 补充说明： - useId 生成的 ID 格式如 :r0:、:r1:，保证 SSR 一致性 - 不要用 useId 生成列表 key，key 应该来自数据本身 - 不要用 useId 做加密或安全相关的唯一标识，它不是密码学安全的 - 一个组件调用多次 useId 会返回不同的 ID，但同一调用在 SSR/CSR 中返回相同值