React Hooks Cheat Sheet/useId for stable accessible IDs

Generate stable IDs for labels and ARIA relationships.

Section: Context and Ref Hooks

useId for stable accessible IDs

tsx
tsx
const id = useId();
return <><label htmlFor={id}>Email</label><input id={id} /></>;
Explanation

Useful for accessibility when components need unique IDs that work consistently with server rendering.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Related commands

Same sheet · prioritizing Context and Ref Hooks
useContext basic usage
Read the nearest context value.
OpenIn sheettsxsame section
useRef DOM reference
Reference a DOM node.
OpenIn sheettsxsame section
useRef mutable container
Persist mutable values between renders without re-rendering.
OpenIn sheettsxsame section
useImperativeHandle custom ref API
Expose a controlled imperative API to a parent ref.
OpenIn sheettsxsame section
useDebugValue in a custom hook
Label a custom hook in React DevTools.
OpenIn sheettsxsame section
useState basic state
Create local component state.
OpenIn sheettsx2 tag match