What is useId, and why is it needed to create unique, accessible IDs in SSR?

Short answer

It generates a unique, stable string ID that matches on the server and client, preventing ID conflicts and Hydration Mismatch errors.

Explanation

In SSR apps, generating IDs with Math.random() makes the server's ID differ from the browser's, causing a Hydration mismatch. useId creates hierarchical IDs based on a component's position in the tree, useful for associating aria-describedby and form fields with their labels.

Code example

function PasswordField() {
  const passwordHintId = useId();

  return (
    <div>
      <label>Password: <input type="password" aria-describedby={passwordHintId} /></label>
      <p id={passwordHintId}>Must contain at least 8 characters.</p>
    </div>
  );
}

Common mistakes

• Using useId to generate list keys.

Follow-up questions

• What is Hydration, and what commonly causes a Hydration Mismatch?

Sources

• React docs — useId