diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index a6fd4c9f2d8..999c1ce4559 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -534,14 +534,50 @@ TODO: description ### `useId` {#useid} ```js -const id = useId(value); +const id = useId(); ``` -TODO: description +`useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches. + +For a basic example, pass the `id` directly to the elements that need it: + +```js +function Checkbox() { + const id = useId(); + return ( + <> + + + + ); +}; +``` + +For multiple IDs in the same component, append a suffix using the same `id`: + +```js +function NameFields() { + const id = useId(); + return ( +
+ +
+ +
+ +
+ +
+
+ ); +} +``` > Note: > -> TODO: identifierPrefix +> `useId` generates a string that includes the `:` token. This helps ensure that the token is unique, but is not supported in CSS selectors or APIs like `querySelectorAll`. +> +> `useId` supports an `identifierPrefix` to prevent collisions in multi-root apps. To configure, see the options for [`hydrateRoot`](/docs/react-dom-client.html#hydrateroot) and [`ReactDOMServer`](/docs/react-dom-server.html). ## Library Hooks {#library-hooks}