useId — generate unique IDs for accessibility.
1import { useId } from "react";23function FormField({ label }) {4 const id = useId();5 return (6 <div>7 <label htmlFor={id}>{label}</label>8 <input id={id} type="text" />9 </div>10 );11}
Benefits: Stable across server/client, unique across component tree, SSR compatible.
vs manual IDs:
1// Manual — may collide2const id = "input-" + counter++;3// useId — guaranteed unique4const id = useId();
Use for: Form labels, ARIA attributes, accessible relationships.