What is the useId hook and when should you use it?

The useId hook is a React hook introduced in React 18 that generates unique IDs that are stable across server and client renders. It's primarily used for accessibility attributes like linking form labels to inputs.

Syntax

const id = useId();

Example: Accessible Form Input

import { useId } from 'react';

function EmailField() {
const id = useId();

return (
<label htmlFor={id}>Email:</label>
<input id={id} type="email" />
);
}

When to Use

• Generating unique IDs for form elements (htmlFor, aria-describedby, aria-labelledby)
• Creating stable IDs in server-side rendering (SSR) applications
• Avoiding ID collisions when the same component is rendered multiple times

When NOT to Use

• As keys in a list (use data-based keys instead)
• As CSS selectors or query selectors
• For any purpose that requires the ID to be predictable

Note: The IDs generated by useId contain colons (:) which may not work in CSS selectors. For multiple related IDs, you can use the same id as a prefix: ${id}-firstName, ${id}-lastName.