jsschools

useId

Generates a unique, stable ID for accessibility attributes.

Since React 18 Spec ↗

Syntax

const id = useId()

Returns

string — A unique string ID stable across server and client renders.

Examples

function Field() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  );
}

const id = useId();
// Use a prefix for multiple related ids
<input aria-describedby={`${id}-hint`} />

Notes

Designed for hydration-safe IDs that match between server and client; do not use it for list keys. Call it at the top level and derive related IDs by appending suffixes to a single useId call rather than calling it many times.

See also