React: What is useId and why is it important for SSR?

useId generates unique IDs that are consistent between server and client rendering.

Code:

1import { useId } from "react";
2
3function FormField({ label, type = "text" }) {
4  const id = useId();
5  const errorId = useId();
6
7  return (
8    <div>
9      <label htmlFor={id}>{label}</label>
10      <input
11        id={id}
12        type={type}
13        aria-describedby={errorId}
14      />
15      <span id={errorId} className="error">
16        {/* error message */}
17      </span>
18    </div>
19  );
20}

Why important for SSR:

• Server and client generate same ID
• Prevents hydration mismatch errors
• IDs are deterministic, not random

vs Math.random():

• Math.random() generates different values on server/client
• Causes hydration mismatch

vs index:

• Index changes if list reorders
• Multiple instances have same ID

Generated format:

• IDs look like :r1:, :r2:
• Unique per component instance
• Works with multiple instances

Use cases:

• Form labels and inputs
• ARIA attributes
• Accessible descriptions