React Course
React
/
Intermediate

useId

Definition

`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes. It generates unique string IDs that are stable across server and client renders.

Explain Like I'm New

In HTML, if you click a `<label>`, it focuses the connected `<input>`. They connect using an ID: `<label htmlFor="name">` and `<input id="name">`. If you render this same component twice, you have two inputs with `id="name"`, which breaks HTML rules and accessibility. `useId` acts like a license plate generator, giving every single input a mathematically guaranteed unique ID, even if you render the component 100 times.

Real World Example

Building highly reusable form components (like a custom TextInput component) that are fully accessible (a11y) to screen readers. `useId` ensures the ARIA attributes and labels always match up correctly without you having to pass a manual ID prop.

Common Use Cases

  • •Generating unique IDs for HTML forms (label htmlFor / input id)
  • •Generating unique IDs for ARIA attributes (aria-describedby, aria-labelledby)
  • •Preventing Hydration mismatches in SSR apps (like Next.js)

Interactive Example

import React, { useId } from 'react';

function PasswordField() {
  // Generate a unique base ID for this specific instance of the component
  const baseId = useId();

  return (
    <div>
      {/* We use the base ID to uniquely link the label and input */}
      <label htmlFor={`${baseId}-input`}>Password:</label>
      
      <input 
        id={`${baseId}-input`} 
        type="password" 
        aria-describedby={`${baseId}-hint`} 
      />
      
      {/* We use the same base ID with a suffix to link the ARIA description */}
      <p id={`${baseId}-hint`}>
        Must be at least 8 characters.
      </p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <h2>Create Account</h2>
      {/* Even though we render this twice, useId ensures no HTML ID collisions! */}
      <PasswordField />
      <PasswordField />
    </div>
  );
}

Interview Questions

basic

  • What problem does `useId` solve?
  • Can you use `useId` to generate keys for lists (`.map()`)?

intermediate

  • How does `useId` prevent SSR hydration mismatches?
  • If you need an ID for an input AND an error message in the same component, should you call `useId` twice?

advanced

  • What does the generated ID string actually look like under the hood?
  • Can you use `useId` to query the DOM using `document.getElementById()`?

trick

  • Does `useId` generate a random UUID like `Math.random()` or `Date.now()`?

Flash Cards

Question

Can you use useId to generate keys for lists?

Click to reveal answer
Answer

NO! You should NEVER use `useId` to generate keys for elements in a list. Keys should be generated from your data (like a database ID). `useId` does not guarantee the same ID if the list order changes.

Question

Should you call useId twice for an input and an error message?

Click to reveal answer
Answer

No, you only need to call it once to get a base ID. You can then append suffixes. E.g., `id={baseId + '-input'}` and `id={baseId + '-error'}`.

Question

Does useId generate a random UUID?

Click to reveal answer
Answer

No. It generates an ID based on the component's position in the React tree. This is crucial because `Math.random()` would generate a different number on the Server than on the Client, causing a hydration error. `useId` guarantees the exact same ID on both.