useId

const id = useId()

• Reference
  • useId()
• Usage
  • Generating unique IDs for accessibility attributes
  • Generating IDs for several related elements
  • Specifying a shared prefix for all generated IDs
  • Using the same ID prefix on the client and the server

Reference

useId()

Call useId at the top level of your component to generate a unique ID:

import { useId } from 'react';

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

See more examples below.

Parameters

useId does not take any parameters.

Returns

useId returns a unique ID string associated with this particular useId call in this particular component.

Caveats

• useId is a Hook, so you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions. If you need that, extract a new component and move the state into it.

• useId should not be used to generate cache keys for use(). The ID is stable when a component is mounted but may change during rendering. Cache keys should be generated from your data.