Add note about useId being allowed in non-async Server Components
#7715
Conversation
|
Hi @hernan-yadiel! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
hernan-yadiel
changed the title
useId being allowed in non-async SCsuseId being allowed in non-async Server Components
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
src/content/reference/react/useId.md
Outdated
| `useId` is allowed in non-async [Server Components](/reference/rsc/server-components). | ||
|
|
||
| </RSC> | ||
|
|
There was a problem hiding this comment.
Can you move this to the caveats? And instead word it as something like "useId currently cannot be used in async server components". And there should be a troubleshooting item for the lint error with an explanation, but that can be added separately.
There was a problem hiding this comment.
I moved the note to caveats.
Where should I add the troubleshooting item you mentioned? That's on the react hooks eslint package, right?
| @@ -46,6 +46,8 @@ function PasswordField() { | |||
|
|
|||
| * `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key) | |||
|
|
|||
| * `useId` currently cannot be used in [async Server Components](/reference/rsc/server-components#async-components-with-server-components). | |||
There was a problem hiding this comment.
Initially, I thought about wording it to highlight that useId is the only hook allowed in Server Components. But then I realized this wording assumes that hooks are disallowed in Server Components. Somehow I thought this was just another React Hooks Rule, or another Server Components rule, when actually that’s not exactly the case. I think this assumption is common among devs, maybe because all of them are not allowed in SCs (except from useId which it wasn't even documented).
My main concern is that if React later introduces more hooks usable in both Server and Client Components, explaining “some hooks are allowed on server components, others aren't” might get tricky.
I can't think of a clear solution, but perhaps labeling hooks differently could help clarify this distinction. For example, “Interactive Hooks” vs. “Non-Interactive Hooks” (or simply “Hooks”).
I remember seeing this PR that mentions that
useIdis allowed in non-async Server Components. However, nowhere in the documentation mentions this fact.