🎣useId

useId is a React Hook for generating unique IDs that can be passed to accessibility attributes.

import { useId } from 'react'

const PasswordField = () => {
  const passwordHintId = useId()
  return (
    <>
      <input type="password" aria-describedby={passwordHintId} />
      <p id={passwordHintId}>Password must be at least 8 characters</p>
    </>
  )
}

useId does not create an ID that is safe to use in CSS selectors, if you need that you must escape it first:

const originalId = useId()
const id = useMemo(() => CSS.escape(originalId), [originalId])

// this also works
const id = useMemo(() => originalId.replaceAll(':', '-'), [originalId])