Skip to content

SSR – Mismatched server / client ids when running in StrictMode #2231

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.

Sign up for GitHub

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

Jump to bottom
Closed
csantos1113 opened this issue Aug 19, 2021 · 6 comments
Closed

SSR – Mismatched server / client ids when running in StrictMode #2231

csantos1113 opened this issue Aug 19, 2021 · 6 comments
Labels
ssr strict mode

Comments

@csantos1113
Copy link
Contributor

csantos1113 commented Aug 19, 2021 •
edited
Loading

🐛 Bug Report

Ids mismatch during SSR running in StrictMode (this example is with Next.js, but I believe it does happen with all SSR approaches)

🤔 Expected Behavior

Ids to match in Server and Client

😯 Current Behavior

Ids don't match between Server and Client during SSR.

Warning: Prop `id` did not match. Server: "react-aria-0-1" Client: "react-aria-0-3"
    in input (at pages/index.js:15)
    in IndexPage (at _app.js:6)
    in SSRProvider (at _app.js:5)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in StrictMode
    in Root

🔦 Context

I'm trying to have react-aria hooks working with Next.js in SSR.

This seems to happen in other libraries like radix-ui/primitives#811

💻 Code Sample

https://codesandbox.io/s/react-spectrum-nextjs-wp58t?file=/pages/index.js
Open the console tab and see the warning there

🌍 Your Environment

Software Version(s)
@react-aria/ssr 3.0.3
@react-aria/textfield 3.3.1
Browser all
Operating System all

🧢 Your Company/Team
@csantos1113 csantos1113 mentioned this issue Aug 19, 2021
Closed
@reidbarber
Copy link
Member

Thanks for finding this. I just confirmed this locally, and only see it in Strict Mode. We currently don't support Strict Mode, but we are working on it. We'll be sure to look for warnings with SSR in Strict Mode like this, and close this out if it gets handled in a blanket Strict Mode issue.

@tomdohnal tomdohnal mentioned this issue Sep 16, 2021
Closed
3 tasks
@snowystinger snowystinger mentioned this issue Oct 8, 2021
Closed
@tmoschou tmoschou mentioned this issue Oct 9, 2021
Closed
@tmoschou
Copy link

FYI React 18 beta has useId

@snowystinger
Copy link
Member

Thanks, @devongovett has been keeping an eye on it reactwg/react-18#111 (comment)
we'll likely be picking up the work we started on react 18 in the near future #2142

@tianenpang tianenpang mentioned this issue Mar 4, 2022
Closed
@lveillard
Copy link

Hello there! Any news on this now that React 18 has been released?
Thanks!

@devongovett
Copy link
Member

#779 is the umbrella issue for strict mode support. For React 18 support, see #2800.

@danielsimao danielsimao mentioned this issue Jun 30, 2022
Closed
@LFDanLu
Copy link
Member

LFDanLu commented Aug 3, 2022

Closing in favor of the umbrella strict mode issue #779

@LFDanLu LFDanLu closed this as completed Aug 3, 2022
bcbray added a commit to bcbray/TWRPO-Backend that referenced this issue Aug 10, 2022
@bcbray
Add patch to use useId for useSSRSafeId in @restart/us
55795a4 
Aria's useSSRSafeId isn't actually safe (it generates different IDs on
server than client), see adobe/react-spectrum#2231
bcbray added a commit to bcbray/TWRPO-Backend that referenced this issue Aug 10, 2022
@bcbray
Add patch to use useId for useSSRSafeId in @restart/us
4f3b359 
Aria's useSSRSafeId isn't actually safe (it generates different IDs on
server than client), see adobe/react-spectrum#2231
@peterjcole peterjcole mentioned this issue Aug 18, 2022
Closed
@sarahgm sarahgm mentioned this issue Sep 7, 2022
Closed
@tianenpang tianenpang mentioned this issue Oct 10, 2022
Closed
ciffelia added a commit to ciffelia/react-spectrum that referenced this issue Oct 13, 2022
@ciffelia
Implement workaround for hydration error on React strict mode (adobe#…
85e1f98 
…2231, adobe#779)

This commit implements a workaround for hydration error during SSR running in strict mode.
The workaround uses React.useId, which is introduced in React 18.
On React 16 and 17, nothing changes with this commit (i.e. hydration error still occurs).
@ciffelia ciffelia mentioned this issue Oct 13, 2022
Closed
5 tasks
ciffelia added a commit to ciffelia/react-spectrum that referenced this issue Oct 13, 2022
@ciffelia
Implement workaround for hydration error on React strict mode (adobe#…
8f116e3 
…2231, adobe#779)

This commit implements a workaround for hydration error during SSR running in strict mode.
The workaround uses React.useId, which is introduced in React 18.
On React 16 and 17, nothing changes with this commit (i.e. hydration error still occurs).
@ciffelia ciffelia mentioned this issue Jan 26, 2023
Closed
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
ssr strict mode
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

React strict mode support for the useSSRSafeId hook ciffelia/react-spectrum
7 participants
@devongovett @snowystinger @tmoschou @reidbarber @csantos1113 @LFDanLu @lveillard