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

[useMediaQuery] Fix behavior of noSsr with React 18 #36056

Merged
merged 2 commits into from Feb 18, 2023

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Feb 4, 2023

Closes #36054. The solution is to run matchMedia on the client side side when React calls getServerSnapshot. The docs says:

optional getServerSnapshot: A function that returns the initial snapshot of the data in the store. It will be used only during server rendering and during hydration of server-rendered content on the client. The server snapshot must be the same between the client and the server, and is usually serialized and passed from the server to the client. If this function is not provided, rendering the component on the server will throw an error.

https://beta.reactjs.org/reference/react/useSyncExternalStore

In our case, when a developer set noSsr: true he explicitly opt-out from trying to hydrate with the first server-side render, while he also server-side render. The concern of tearing in #30655 should be OK since this change only impacts the server snapshot, React will update if needed when calling getSnapshot.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work hook: useMediaQuery regression A bug, but worse labels Feb 4, 2023
@oliviertassinari oliviertassinari changed the title Fix no ssr regression [useMediaQuery] Fix behavior of noSsr Feb 4, 2023
@mui-bot
Copy link

mui-bot commented Feb 4, 2023

Messages
📖 Netlify deploy preview: https://deploy-preview-36056--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against ce749ec

@oliviertassinari oliviertassinari changed the title [useMediaQuery] Fix behavior of noSsr [useMediaQuery] Fix behavior of noSsr with React 18 Feb 18, 2023
@oliviertassinari oliviertassinari merged commit a51caed into mui:master Feb 18, 2023
@oliviertassinari oliviertassinari deleted the fix-no-ssr-regression branch February 18, 2023 18:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work hook: useMediaQuery regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[useMediaQuery] Regression noSsr: true has no longer any impact
2 participants