Skip to content
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

Use @react-aria/ssr for isomorphic ID generation. #1409

Merged
merged 12 commits into from
Sep 15, 2021
Merged

Conversation

jfuchs
Copy link
Contributor

@jfuchs jfuchs commented Sep 7, 2021

Closes #1392

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@jfuchs jfuchs requested a review from a team September 7, 2021 16:18
@changeset-bot
Copy link

changeset-bot bot commented Sep 7, 2021

🦋 Changeset detected

Latest commit: 841ad7f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/components Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@jfuchs jfuchs marked this pull request as draft September 7, 2021 16:18
@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2021

size-limit report 📦

Path Size
dist/browser.esm.js 48.85 KB (+0.53% 🔺)
dist/browser.umd.js 49.13 KB (+0.58% 🔺)

@jfuchs
Copy link
Contributor Author

jfuchs commented Sep 7, 2021

per adobe/react-spectrum#2278 (comment), we might get a release early next week.

@@ -0,0 +1,37 @@
---
title: Server-side rendering with Primer React
Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for writing docs! 💖

Copy link
Contributor

Choose a reason for hiding this comment

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

docs/content/ssr.mdx Outdated Show resolved Hide resolved
docs/content/ssr.mdx Outdated Show resolved Hide resolved
@@ -1,3 +1,5 @@
// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.

let idSeed = 10000
export function uniqueId(): string {
Copy link
Contributor

Choose a reason for hiding this comment

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

Is uniqueId still useful if we have useSSRSafeId?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There's one place where it's still used — the useFocusZone behavior. I believe it's safe because it's only called downstream of a user interaction. As far as I can tell, we'd need to do a decent refactoring or just require that IDs are already in place to get rid of it.

Copy link
Contributor

@colebemis colebemis left a comment

Choose a reason for hiding this comment

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

Looks great! Just left a few minor comments.

jfuchs and others added 2 commits September 15, 2021 08:59
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

uniqueId() causes hydration warnings with server-side rendering
2 participants