React: What is the useId() hook and what is it for?

useId() — React 18+ hook for generating a unique ID between server and client without hydration issues.

Problem: With SSR (Server-Side Rendering) Math.random() or Date.now() give different values on server and client → hydration breaks.

Analogy: Imagine ticket numbering. On the server you gave out ticket #123, and on the client #456 — confusion! useId guarantees the same number on both.

1import { useId } from "react";
2
3function TextInput({ label }) {
4  const id = useId();  // ":r1:" on server AND on client
5  return (
6    <>
7      <label htmlFor={id}>{label}</label>
8      <input id={id} type="text" />
9    </>
10  );
11}

When to use:

• Linking <label> with <input> (htmlFor + id).
• ARIA attributes (aria-labelledby, aria-describedby).
• Generating unique IDs for lists.

Important: useId is ONLY for IDs, not for keys in lists!