-
Notifications
You must be signed in to change notification settings - Fork 610
uniqueId() causes hydration warnings with server-side rendering #1392
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Added to our project board. Thank you! |
Looks like this isn't a new problem to React (facebook/react#4000, facebook/react#5867, reactjs/rfcs#32). I've looked around at a few solutions, and I like most of what React-aria does:
I do think there's a bug in their solution, for which I've opened adobe/react-spectrum#2277. One option for us, if that issue gets fixed, is to pull in |
One other catch is that you have to be careful about where you include the provider in the tree — you have to place them to avoid ever having two components in the calling
will be unsafe, but you can wrap each conditional call to
|
This could also be fixed by allowing me to set IDs manually in many Primer components. For example, ActionList only allows me to use auto-generated IDs unless I take the much larger step of using a custom renderer everywhere for it. For example, requiring a unique ID for each ActionList item would put me in control. Even if the ID I provide needs to be used elsewhere, one could also use a template like |
Describe the bug
When using server-side rendering, the
uniqueId()
function causes hydration warnings because theidSeed
counter is globally shared for all renders for all users while it's reset to 10,000 on the client.Additionally, this has the unintended side effect of leaking information about how many times a given page is visited (per rendering process, at least).
To Reproduce
Render any Primer component that uses
uniqueId()
using server-side rendering.Expected behavior
The same ID is used on the server as on the client.
Screenshots
The text was updated successfully, but these errors were encountered: