Browse Source

tweaks

main
Dan Abramov 2 years ago
parent
commit
6dcdaac51f
  1. 4
      beta/src/content/apis/react/useId.md

4
beta/src/content/apis/react/useId.md

@ -135,7 +135,7 @@ input { margin: 5px; }
<Gotcha> <Gotcha>
If you use [server rendering,](/apis/react-dom/server) you must render an identical component tree on the server and the client. If the trees you render on the server and the client don't match exactly, the generated IDs won't match up. **`useId` requires an identical component tree on the server and the client** when you use [server rendering](/apis/react-dom/server). If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
</Gotcha> </Gotcha>
@ -147,6 +147,8 @@ The primary benefit of `useId` is that React ensures that it works with [server
This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.
Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
</DeepDive> </DeepDive>
--- ---

Loading…
Cancel
Save