useId, for an id that matches between server and client

A generated id from a counter or a random value differs between the server render and the client hydration, which is a mismatch React now reports.

function Field({ label }) {
  const id = useId()

  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  )
}

// the value looks like ':r1:' and is NOT valid in a CSS
// selector — document.querySelector('#:r1:') throws.
// use it for htmlFor and aria-*, not for styling hooks.

The colons are deliberate, to make it obvious the value is not meant to be written by hand, and they are the detail that catches anybody using the id in a query selector. It is a per-component identifier rather than a per-element one, so a component needing several ids appends a suffix to one call rather than calling it repeatedly.