.tip

Hard-coded ids collide the moment the component renders twice, and random ids mismatch between server and client. useId is stable across both and unique per instance.

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} aria-describedby={`${id}-hint`} />

Use it for aria-controls, aria-labelledby and anything else that links two elements by id.