From 0734f600b440d83000375dec2bb2df0ed4882adb Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Wed, 23 Mar 2022 20:27:08 -0400
Subject: [PATCH 1/2] [18] Add docs for useId

---
 content/docs/hooks-reference.md | 42 ++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index a6fd4c9f2d8..622a1b21736 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, simply pass the ID to the elements that need it:
+
+```js
+function Checkbox() {
+  const id = useId();
+  return (
+    <>
+      <label htmlFor={id}>Do you like React?</label>
+      <input id={id} type="checkbox" name="react"/>
+    </>
+  );
+};
+```
+
+For multiple IDs in the same component, `useId` supports appending a suffix:
+
+```js
+function NameFields() {
+  const id = useId();
+  return (
+    <div>
+      <label htmlFor={id + '-firstName'}>First Name</label>
+      <div>
+        <input id={id + '-firstName'} type="text" />
+      </div>
+      <label htmlFor={id + '-lastName'}>Last Name</label>
+      <div>
+        <input id={id + '-lastName'} type="text" />
+      </div>
+    </div>
+  );
+}
+```
 
 > 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.
+> 
+> `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}
 

From 5a9604ccea8649d351772657a313b18f1859fa48 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Thu, 24 Mar 2022 10:00:36 -0400
Subject: [PATCH 2/2] Update based on feedback

---
 content/docs/hooks-reference.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 622a1b21736..999c1ce4559 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -539,7 +539,7 @@ const id = useId();
 
 `useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
 
-For a basic example, simply pass the ID to the elements that need it:
+For a basic example, pass the `id` directly to the elements that need it:
 
 ```js
 function Checkbox() {
@@ -553,7 +553,7 @@ function Checkbox() {
 };
 ```
 
-For multiple IDs in the same component, `useId` supports appending a suffix:
+For multiple IDs in the same component, append a suffix using the same `id`:
 
 ```js
 function NameFields() {
@@ -575,7 +575,7 @@ function NameFields() {
 
 > Note:
 > 
-> `useId` generates a string that includes the `:` token. This helps ensure that the token is unique, but is not supported in CSS selectors.
+> `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).