Edits to useId doc (#6464)

Author: gaearon

src/content/reference/react/useId.md

@@ -303,39 +303,32 @@ input { margin: 5px; }
 
 </Sandpack>
 
-### 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(<App />, { identifierPrefix: 'react-app1' });
-// ...
+// Server
+import { renderToPipeableStream } from 'react-dom/server';
 
+const { pipe } = renderToPipeableStream(
+  <App />,
+  { 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.