useId() Hooks ?

What is useId() hook?

The useId() hook is new way to grenerate a unique random Id in React 18.

It is a React Hook for generating unique IDs that can be passed to accessibility attributes.

How to use useid()?

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

useId() Code Example

HTML accessibilty attributes like ariadescribrdby let you specify that two tage are related to each other.

For example, you can specify that an element (like an input) is described by another element (like a paragraph).

useId() Code Example (Cont)

Hardcoding IDs like the following is not a good practice in React. A component may be rendered more than once on the page and IDs have to be unique.

useId() Code Example (Cont)

Here is how we can use useId() hook for this:

useId() Code Example (Cont)

Even if PasswordField appears multiple times on the screen, the generated IDs won’t clash.