From 6dcdaac51fe7467c8e4c2ba7c33eb9d9ba7a5ac2 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 5 Oct 2022 01:52:56 +0100 Subject: [PATCH] tweaks --- beta/src/content/apis/react/useId.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/beta/src/content/apis/react/useId.md b/beta/src/content/apis/react/useId.md index 59a83172..6afcb9c6 100644 --- a/beta/src/content/apis/react/useId.md +++ b/beta/src/content/apis/react/useId.md @@ -135,7 +135,7 @@ input { margin: 5px; } -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. @@ -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. +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. + ---