What is the useId Hook in React?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Call useId at the top level

   Invoke const id = useId() inside your component, following the rules of hooks.

2. Step 2

   Attach it to elements

   Use the returned string for htmlFor, id, and aria-* attributes to link related elements.

3. Step 3

   Derive related IDs

   Append suffixes like `${id}-first` and `${id}-last` when one component needs several IDs.

4. Step 4

   Rely on hydration stability

   Trust that React produces the same ID on server and client so no mismatch warning appears.

5. Step 5

   Avoid misuse for keys

   Do not use useId for list keys; keys must come from your data, not generated IDs.

Code Example

import { useId } from 'react'

function NameField() {
  const id = useId()
  return (
    <div>
      <label htmlFor={id}>Full name</label>
      <input id={id} type="text" />
    </div>
  )
}

function PasswordField() {
  const id = useId()
  return (
    <div>
      <label htmlFor={`${id}-pw`}>Password</label>
      <input id={`${id}-pw`} type="password" aria-describedby={`${id}-hint`} />
      <p id={`${id}-hint`}>At least 8 characters.</p>
    </div>
  )
}

Follow-up Questions

• Why can't you use Math.random() to generate IDs for SSR?
• Why should useId not be used for list keys?
• How do you create multiple related IDs from one useId call?
• What problem does useId solve during hydration?
• Is the format of a useId value guaranteed?