useId Hook in React

useId

The useId hook in React generates unique IDs that stay consistent across re-renders and remain unique within the application.

HTML accessibility attributes like htmlFor in labels allow you to link elements together. However, hardcoding IDs in React is not recommended because a component might be rendered multiple times on a page, and IDs must remain unique. Instead of manually setting an ID, use useId to generate a unique one dynamically.

import { useId } from "react";

function PasswordField({ label }) {
  const id = useId();

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

Do not use useId to generate keys for a list. Instead, derive keys from your data.

useId ensures consistent IDs between server and client, preventing hydration mismatches. An incrementing counter (nextId++) can cause issues because the order of hydration on the client may differ from the server’s output. useId guarantees stable IDs, making hydration reliable.

---

identifierPrefix

The identifierPrefix is an optional configuration in React that allows you to customize the prefix for useId generated IDs. It ensures unique IDs in multi-instance applications. You can set it when creating a React app using createRoot or hydrateRoot:

• Example in Client-Side Rendering

  import React from "react";
  import { createRoot } from "react-dom/client";
  
  createRoot(document.getElementById("root"), {
    identifierPrefix: "myApp-",
  }).render(<App />);

  IDs generated by useId will now be prefixed with "myApp-", ensuring uniqueness across instances.

• Example in Server-Side Rendering (SSR)

  import { renderToString } from "react-dom/server";
  
  const html = renderToString(<App />, { identifierPrefix: "serverApp-" });

  Now, all useId-generated IDs will start with "serverApp-", preventing clashes when hydrated on the client.