What is the useId hook in React?

React

The short answer

useId generates a unique ID that is stable between server and client renders. It is designed for connecting HTML elements that need matching IDs, like form labels and inputs or ARIA attributes. It solves the problem of hydration mismatches that happen when you generate IDs manually.

The problem it solves

Before useId, generating unique IDs was tricky with SSR:

// Bad — different ID on server vs client
function Input({ label }) {
  const id = Math.random().toString(36).slice(2); // different every render!
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

The server generates one ID, the client generates a different one. React warns about a hydration mismatch.

How useId works

import { useId } from 'react';
function Input({ label }) {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} />
    </>
  );
}

useId returns the same ID on both server and client, so there is no hydration mismatch. The ID looks something like :r1: — it is not meant to be pretty, just unique and stable.

Multiple IDs from one hook

You can use one useId call to create multiple related IDs:

function LoginForm() {
  const id = useId();
  return (
    <form>
      <label htmlFor={`${id}-email`}>Email</label>
      <input id={`${id}-email`} type="email" />
      <label htmlFor={`${id}-password`}>Password</label>
      <input id={`${id}-password`} type="password" />
    </form>
  );
}

What useId is NOT for

  • Do not use it for list keys — use data IDs instead
  • Do not use it for CSS selectors — the format is not guaranteed
  • Do not use it for anything other than accessibility attributes and form connections

Interview Tip

This is a simple question. Explain that useId generates stable IDs for connecting labels to inputs and ARIA attributes. The key point is that it works with SSR — the ID is the same on server and client, avoiding hydration mismatches.

Why interviewers ask this

This tests if you know the newer React hooks and care about accessibility. Connecting labels to inputs with matching IDs is an accessibility requirement, and useId is the correct way to do it in React.

Table of Contents