React useId Hook Cheat Sheet

What is `useId`?

A React Hook that generates a unique, stable ID that’s consistent across server and client — great for accessibility and form labels.

import { useId } from "react";

Basic Usage

const id = useId();

return (
  <div>
    <label htmlFor={id}>Name</label>
    <input id={id} type="text" />
  </div>
);

• id is unique per component instance
• Helpful for matching label and input elements

Multiple IDs

const id = useId();

return (
  <>
    <label htmlFor={`${id}-email`}>Email</label>
    <input id={`${id}-email`} type="email" />

    <label htmlFor={`${id}-password`}>Password</label>
    <input id={`${id}-password`} type="password" />
  </>
);