diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 99d55a6a58d..81cb3a30f9a 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -303,39 +303,32 @@ input { margin: 5px; }
-### useId in server rendering {/*useid-in-server-rendering*/}
+---
-Choose a unique id prefix and pass it into the server options and client options. `useId` will return the same id string on server side and client side. The following example selects `react-app1` as the id prefix.
+### Using the same ID prefix on the client and the server {/*using-the-same-id-prefix-on-the-client-and-the-server*/}
-```js
-import { useId } from 'react';
-
-function App() {
- const id = useId();
- // ...
-
-```
+If you [render multiple independent React apps on the same page](#specifying-a-shared-prefix-for-all-generated-ids), and some of these apps are server-rendered, make sure that the `identifierPrefix` you pass to the [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) call on the client side is the same as the `identifierPrefix` you pass to the [server APIs](https://react.dev/reference/react-dom/server) such as [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream)
```js
-/**
- * server side
- */
-
-import ReactServer from 'react-dom/server';
-
-const { pipe } = ReactServer.renderToPipeableStream(, { identifierPrefix: 'react-app1' });
-// ...
+// Server
+import { renderToPipeableStream } from 'react-dom/server';
+const { pipe } = renderToPipeableStream(
+ ,
+ { identifierPrefix: 'react-app1' }
+);
```
```js
-/**
- * client side
- */
-
+// Client
import { hydrateRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
-const root = hydrateRoot(domNode, reactNode, { identifierPrefix: 'react-app1' });
-
+const root = hydrateRoot(
+ domNode,
+ reactNode,
+ { identifierPrefix: 'react-app1' }
+);
```
+
+You do not need to pass `identifierPrefix` if you only have one React app on the page.