React: What is useId and why use it over Math.random()?

useId generates unique, consistent IDs for SSR compatibility.

Code:

1import { useId } from "react";
2
3function FormField({ label, error }) {
4  const inputId = useId();
5  const errorId = useId();
6
7  return (
8    <div>
9      <label htmlFor={inputId}>{label}</label>
10      <input
11        id={inputId}
12        aria-describedby={error ? errorId : undefined}
13        aria-invalid={!!error}
14      />
15      {error && <span id={errorId} className="error">{error}</span>}
16    </div>
17  );
18}

Why not Math.random():

• Math.random() generates different values on server vs client
• Causes hydration mismatch warnings
• Breaks SSR

Why not index in list:

• Index changes if list reorders
• Multiple instances have same ID
• Not stable across renders

Generated IDs:

• Format: :r1:, :r2:, etc.
• Unique per component instance
• Deterministic (same on server and client)

Use cases:

• Form labels and inputs
• ARIA attributes
• Accessible descriptions
• Any ID that needs to be unique and consistent