React 19+ · Hook

useId

useId generates unique strings for connecting elements through accessibility attributes. Call it at the top level of a component or custom Hook, with no arguments.

How it works

Call useId at the top level of a component or custom Hook to obtain a stable unique string for the mounted component. Pass that string to related accessibility attributes, such as aria-describedby, so elements can reference one another without manually coordinating IDs.

Syntax

const id = useId();

Returns

A unique ID string associated with the particular useId call in the component.

Key points

Use it to create IDs for relationships between accessible elements, such as a control and its descriptive text.
The Hook has no configuration arguments; invoke it directly.
Each call produces a string tied to that call site and component instance.
Treat the generated value as a rendering identifier, not as a permanent external identifier.
Reuse the value across attributes that need to reference the same element.

Common mistakes

Call it only at the top level of a component or custom Hook; move conditional or repeated state into a separate component.
Do not use this Hook in an async Server Component.
Server-rendered and client-rendered trees must match for generated IDs to stay aligned.

Example: Associate an input with its hint

import { useId } from 'react';

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

  return (
    <>
      <label htmlFor="password">Password</label>
      <input id="password" type="password" aria-describedby={passwordHintId} />
      <p id={passwordHintId}>Use at least 12 characters.</p>
    </>
  );
}

Generates a component-specific ID and connects the input to its accessibility hint.

When to use it

Accessible form descriptions

A form control needs to reference helper or validation text through aria-describedby.

Reusable component relationships

Several component instances need internally coordinated IDs without manually passing them from a parent.

SSR-compatible accessibility IDs

Server-rendered markup must preserve matching control-to-description references across hydration.

Interview questions

QWhat does useId return, and what is its main purpose?

useId generates a unique ID string associated with a particular useId call in a component. The intended use is connecting elements through accessibility attributes.

Follow-up: Why not use it for list keys? Keys should come from the underlying data, while useId is intended for IDs in the rendered accessibility relationship.

QWhere can useId be called?

No parameters are required. Call it at the component or custom Hook's top level, not inside a loop or condition.

Follow-up: How would you handle a variable number of repeated fields? Extract each repeated field into a component so each instance can call the Hook at its own top level.

QWhat constraint does useId have with server rendering?

With server rendering, the server and client must render an identical component tree. If their trees differ, the generated IDs will not match.

Follow-up: What is the practical implication for hydration? Keep conditional rendering and component structure consistent between server and client, especially around components using useId.

use
useState
useRef

Source: useId – React. Checked 2026-10-15.