Skip to content

fix: SSR hydration mismatch from Date.now private prop keys#9787

Merged
reidbarber merged 1 commit intomainfrom
fix-ssr-hydration-date-now
Mar 12, 2026
Merged

fix: SSR hydration mismatch from Date.now private prop keys#9787
reidbarber merged 1 commit intomainfrom
fix-ssr-hydration-date-now

Conversation

@reidbarber
Copy link
Member

Closes #9786

Removes Date.now from private prop keys to avoid SSR hydration mismatch issues. Not really sure of a better solution than just using a static string.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Smoke test date picker and form validation.

🧢 Your Project:

@reidbarber reidbarber enabled auto-merge March 12, 2026 22:30
@reidbarber reidbarber added this pull request to the merge queue Mar 12, 2026
Merged via the queue into main with commit adcdec9 Mar 12, 2026
29 checks passed
@reidbarber reidbarber deleted the fix-ssr-hydration-date-now branch March 12, 2026 23:27
// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
export const roleSymbol: string = '__role_' + Date.now();
export const focusManagerSymbol: string = '__focusManager_' + Date.now();
// These need to be stable across server and client module evaluation for SSR hydration.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like that github issue is closed, can we use a symbol if the React version is 18+? would that be stable across the two environments?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it was never added: facebook/react#7552 (comment)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

doh, i should read more. I wish github would mark it a different color, i just saw merged prs and assumed

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep haha, I thought the same thing at first glance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SSR hydration mismatch: Date.now() called at module scope in @react-stately/form and @react-aria/datepicker

5 participants