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.

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

fix: create a component tree that matches between client and server to avoid useId output mismatch #371

Merged
merged 11 commits into from
Jan 19, 2025
Merged

fix: create a component tree that matches between client and server to avoid useId output mismatch #371

merged 11 commits into from
Jan 19, 2025

Conversation

Valerioageno
Copy link
Member

@Valerioageno Valerioageno commented Jan 19, 2025 •
edited by marcalexiei
Loading

Context & Description

Close #369

@github-actions github-actions bot added the typescript Requires typescript knowledge label Jan 19, 2025
@marcalexiei marcalexiei changed the title create TuonoScripts component feat: create TuonoScripts component Jan 19, 2025
@marcalexiei marcalexiei changed the title feat: create TuonoScripts component fix: create a component tree that matches between client and server to avoid useId output mismatch Jan 19, 2025
marcalexiei
marcalexiei reviewed Jan 19, 2025
View reviewed changes
Copy link
Member

@marcalexiei marcalexiei left a comment

Choose a reason for hiding this comment

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

Added a few considerations.

Note

Since the PR is still a draft and earlier we hadn't the time to completely discuss the solution some of my comment might be outdated / out of scope 😅.

My main concern at the moment is that resource management will be moved to the router. IMHO we should find a way to keep this kind of logic inside tuono rather than moving it in tuono-router.

examples/tuono-app/src/routes/index.tsx Outdated Show resolved Hide resolved
packages/tuono-router/src/components/RouterContext.tsx Outdated Show resolved Hide resolved
packages/tuono-router/src/TuonoScripts.tsx Outdated Show resolved Hide resolved
packages/tuono-router/src/TuonoScripts.tsx Outdated Show resolved Hide resolved
packages/tuono-router/src/components/RouterContext.tsx Outdated Show resolved Hide resolved
packages/tuono/src/hydration/index.tsx Show resolved Hide resolved
@Valerioageno Valerioageno force-pushed the fix-useId-issue branch 2 times, most recently from a174abc to 1c21680 Compare January 19, 2025 13:49
@Valerioageno Valerioageno marked this pull request as ready for review January 19, 2025 13:51
@Valerioageno Valerioageno mentioned this pull request Jan 19, 2025
Merged
4 tasks
marcalexiei
marcalexiei approved these changes Jan 19, 2025
View reviewed changes
Copy link
Member

@marcalexiei marcalexiei left a comment

Choose a reason for hiding this comment

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

I made a few changes (listed as separate commits):

The most relevant is the one that moves StrictMode as first render component on both server and client to be in sync with the react documentation:

https://react.dev/reference/react/StrictMode#reference

@Valerioageno Valerioageno merged commit 33aa37e into main Jan 19, 2025
16 checks passed
@Valerioageno Valerioageno deleted the fix-useId-issue branch January 19, 2025 15:23
@marcalexiei marcalexiei mentioned this pull request Jan 19, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@marcalexiei marcalexiei marcalexiei approved these changes

Assignees

@marcalexiei marcalexiei

@Valerioageno Valerioageno

Labels
typescript Requires typescript knowledge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: useId triggers a hydration mismatch error
2 participants
@Valerioageno @marcalexiei