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

Fix: React - Use "createRoot" instead of "hydrateRoot" for client:only #3337

Merged
merged 5 commits into from
May 12, 2022

Conversation

bholmesdev
Copy link
Contributor

@bholmesdev bholmesdev commented May 10, 2022

Changes

Testing

N/A, check your console 😉

Docs

N/A

@changeset-bot
Copy link

changeset-bot bot commented May 10, 2022

🦋 Changeset detected

Latest commit: b04de83

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

This PR includes changesets to release 2 packages
Name Type
astro Patch
@astrojs/react Patch

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

@github-actions github-actions bot added pkg: astro Related to the core `astro` package (scope) pkg: react Related to React (scope) pkg: integration Related to any renderer integration (scope) labels May 10, 2022
@bholmesdev
Copy link
Contributor Author

bholmesdev commented May 10, 2022

...I've received word we fundamentally can't use render instead of hydrate due to problems with children. Sadly closing this PR for a different fix 😢 Update: see below
cc @natemoo-re

@bholmesdev bholmesdev closed this May 10, 2022
@bholmesdev bholmesdev reopened this May 11, 2022
Copy link
Contributor

@matthewp matthewp left a comment

Choose a reason for hiding this comment

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

lgtm

@bholmesdev
Copy link
Contributor Author

Welp, turns out we can use this from personal testing! Nested component islands and children are just as stable using createRoot over hydrateRoot for client:only specifically. Deferring to @natemoo-re in case there's nuance I'm missing here.

Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

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

LGTM! Few comments about future-proofing the last argument.

packages/astro/src/runtime/server/hydration.ts Outdated Show resolved Hide resolved
packages/integrations/react/client-v17.js Show resolved Hide resolved
Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

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

Good to merge!

@matthewp matthewp merged commit 678c2b7 into main May 12, 2022
@matthewp matthewp deleted the fix/react-hydrate-client-only-error branch May 12, 2022 16:05
@github-actions github-actions bot mentioned this pull request May 12, 2022
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
…ly` (withastro#3337)

* feat: pass "client" directive to clientEntrypoints

* refactor: remove hydration warning suppression react 17

* feat: remove hydration warning suppression react 18

* chore: changeset

* fix: change metadata to options bag
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: astro Related to the core `astro` package (scope) pkg: integration Related to any renderer integration (scope) pkg: react Related to React (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 BUG: React component hydration error when loaded with client:only
3 participants