From 65b04292eb577b87a5f4025cd983831bd42c3333 Mon Sep 17 00:00:00 2001 From: dan Date: Wed, 6 Apr 2022 21:49:13 +0100 Subject: [PATCH] Document useId is not for keys (#4557) --- content/blog/2022-03-29-react-v18.md | 4 ++++ content/docs/hooks-reference.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/content/blog/2022-03-29-react-v18.md b/content/blog/2022-03-29-react-v18.md index a2f287548..b46eb91fc 100644 --- a/content/blog/2022-03-29-react-v18.md +++ b/content/blog/2022-03-29-react-v18.md @@ -220,6 +220,10 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the `useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/docs/hooks-reference.html#useid). +> Note +> +> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data. + #### useTransition {#usetransition} `useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/docs/hooks-reference.html#usetransition) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index ee4ddfb49..cd163626c 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -611,6 +611,10 @@ const id = useId(); `useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches. +> Note +> +> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data. + For a basic example, pass the `id` directly to the elements that need it: ```js