-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
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(theme): fix useWindowSize React hydration issue #9446
Conversation
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the deploy preview of this PR
|
Size Change: +3 B (0%) Total Size: 1.13 MB ℹ️ View Unchanged
|
540515d
to
c6762a2
Compare
I've provided some test data here: #9379 (comment) |
387d353
to
72d92ed
Compare
Is this ready? Could you add a little explanation about how the dev simulation causes the problem? Or is the only intention to return "ssr" on first production render too (since it looks like it would initialize to "mobile" in production client rendering)? |
It's not the dev simulation that causes the problem, it's that to avoid React hydration mismatches we should never ever initialialize a state based on client-side apis only (ie window size, localStorage etc...). We have a few other places where we do something wrong (useColorMode for example, announcementBanner afaik, noted to fix this too), but only this one lead to hydration errors apparently. More context: |
Motivation
Fix #9379
Test Plan
CI does not report hydration issues
Test links
https://deploy-preview-9446--docusaurus-2.netlify.app/