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

Bug: useSyncExternalStore will cause hydration missmatch in StrictMode if serverSnapshot is different from snapshot #26095

Closed
promer94 opened this issue Feb 2, 2023 · 1 comment · Fixed by #26791
Closed

Bug: useSyncExternalStore will cause hydration missmatch in StrictMode if serverSnapshot is different from snapshot #26095

promer94 opened this issue Feb 2, 2023 · 1 comment · Fixed by #26791
Labels
Type: Bug

Comments

@promer94
Copy link

promer94 commented Feb 2, 2023 •
edited
Loading

React version

React version: 18.3.0-next-b0671f9ea-20230130

Problem

In StrictMode, when using hydrateRoot to render a component that using useSyncExternalStore it seems that useSES will do hydration twice.

But in second hydration process, useSES does not use the result of getServerSnapshot as initial state, which will cause hydration error.

This problem will only happen in development mode,

Reproduce

Link to code example:
https://codesandbox.io/s/useses-18-3-rojznv

It works well in react 18.2
https://codesandbox.io/s/useses-18-2-13iskc
@promer94 promer94 added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Feb 2, 2023
@promer94 promer94 changed the title Bug: useSyncExternalStore will cause hydration missmatch in strict-mode if serverSnapshot is different from Bug: useSyncExternalStore will cause hydration missmatch in strict-mode if serverSnapshot is different from snapshot Feb 2, 2023
@promer94 promer94 changed the title Bug: useSyncExternalStore will cause hydration missmatch in strict-mode if serverSnapshot is different from snapshot Bug: useSyncExternalStore will cause hydration missmatch in StrictMode if serverSnapshot is different from snapshot Feb 2, 2023
@eps1lon
Copy link
Collaborator

eps1lon commented Feb 2, 2023 •
edited
Loading

Can confirm. I reduced the repros a bit more so that it's easier to comprehend what's going on:

18.3.0-next-2ac77aab9-20221029 (with StrictMode) broken: https://codesandbox.io/s/useses-18-3-forked-co9ix3
18.3.0-next-2ac77aab9-20221029 (without StrictMode) passing: https://codesandbox.io/s/useses-18-3-forked-1x8ivp
18.3.0-next-cf3932be5-20221027 passing: https://codesandbox.io/s/useses-18-3-forked-good-0bgnqu

Broke somewhere in cf3932b...2ac77aa

@eps1lon eps1lon added Type: Bug and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels Feb 2, 2023
@eps1lon eps1lon mentioned this issue Feb 6, 2023
Closed
sophiebits added a commit to sophiebits/react that referenced this issue May 7, 2023
@sophiebits
Fix uSES hydration in strict mode
484b290 
Previously, we'd call and use getSnapshot on the second render resulting in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"` and then `Error: Text content does not match server-rendered HTML.`.

Fixes facebook#26095. Closes facebook#26113.
@sophiebits sophiebits mentioned this issue May 7, 2023
Merged
sophiebits added a commit that referenced this issue May 12, 2023
@sophiebits @eps1lon
Fix uSES hydration in strict mode (#26791)
4cd7065 
Previously, we'd call and use getSnapshot on the second render resulting
in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"`
and then `Error: Text content does not match server-rendered HTML.`.

Fixes #26095. Closes #26113. Closes #25650.

---------

Co-authored-by: eps1lon <[email protected]>
github-actions bot pushed a commit that referenced this issue May 12, 2023
@sophiebits
Fix uSES hydration in strict mode (#26791)
646a30e 
Previously, we'd call and use getSnapshot on the second render resulting
in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"`
and then `Error: Text content does not match server-rendered HTML.`.

Fixes #26095. Closes #26113. Closes #25650.

---------

Co-authored-by: eps1lon <[email protected]>

DiffTrain build for [4cd7065](4cd7065)
EdisonVan pushed a commit to EdisonVan/react that referenced this issue Apr 15, 2024
@sophiebits @eps1lon @AndyPengc12
Fix uSES hydration in strict mode (facebook#26791)
45bd126 
Previously, we'd call and use getSnapshot on the second render resulting
in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"`
and then `Error: Text content does not match server-rendered HTML.`.

Fixes facebook#26095. Closes facebook#26113. Closes facebook#25650.

---------

Co-authored-by: eps1lon <[email protected]>
bigfootjon pushed a commit that referenced this issue Apr 18, 2024
@sophiebits
Fix uSES hydration in strict mode (#26791)
3546b41 
Previously, we'd call and use getSnapshot on the second render resulting
in `Warning: Text content did not match. Server: "Nay!" Client: "Yay!"`
and then `Error: Text content does not match server-rendered HTML.`.

Fixes #26095. Closes #26113. Closes #25650.

---------

Co-authored-by: eps1lon <[email protected]>

DiffTrain build for commit 4cd7065.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix uSES hydration in strict mode sophiebits/react
2 participants
@eps1lon @promer94