Skip to content

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

Merged
matthewp merged 5 commits into
mainfrom
fix/react-hydrate-client-only-error
May 12, 2022
Merged

Fix: React - Use "createRoot" instead of "hydrateRoot" for client:only#3337
matthewp merged 5 commits into
mainfrom
fix/react-hydrate-client-only-error

Conversation

@bholmesdev
Copy link
Copy Markdown
Contributor

@bholmesdev bholmesdev commented May 10, 2022 •
edited
Loading

Changes

Testing

N/A, check your console 😉

Docs

N/A

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 10, 2022 •
edited
Loading

🦋 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
Copy Markdown
Contributor Author

bholmesdev commented May 10, 2022 •
edited by FredKSchott
Loading

...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
matthewp
matthewp approved these changes May 11, 2022
View reviewed changes
Copy link
Copy Markdown
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
Copy Markdown
Contributor Author

bholmesdev commented May 11, 2022

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.

natemoo-re
natemoo-re reviewed May 11, 2022
View reviewed changes
Copy link
Copy Markdown
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.

Comment thread packages/astro/src/runtime/server/hydration.ts Outdated
Comment thread packages/integrations/react/client-v17.js
natemoo-re
natemoo-re approved these changes May 12, 2022
View reviewed changes
Copy link
Copy Markdown
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
Merged
@natemoo-re natemoo-re mentioned this pull request May 13, 2022
Closed
1 task
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@bholmesdev
Fix: React - Use "createRoot" instead of "hydrateRoot" for `client:on…
5f47408 
…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

Reviewers

@matthewp matthewp matthewp approved these changes

+1 more reviewer

@natemoo-re natemoo-re natemoo-re approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

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

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

3 participants

@bholmesdev @matthewp @natemoo-re