Hook · Accessibility
useId
Unique, stable IDs
useId generates a unique identifier per component, stable between renders and consistent between client and server. Designed to connect inputs with labels, aria-describedby, and other accessible pairs.
Why not Math.random()
In SSR, the ID generated on the server must match the one on the client to avoid hydration errors. useId guarantees that correspondence; random values don't.
Not for list keys
useId gives one ID per component, not per element. For list keys, use your data's IDs. For multiple IDs in the same component, append suffixes: `${id}-name`.
Common pitfalls
- 01Do not use useId as a list key — it's for accessibility attributes, not data identity.
- 02The generated ID includes colons (:) — don't use it in CSS selectors without escaping.
- 03If you need multiple IDs per component, generate a base with useId and append suffixes: id + '-label', id + '-description'.
Was this helpful?
Sign in to give feedback