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

fix(theme): fix useWindowSize React hydration issue #9446

Merged
merged 3 commits into from
Oct 25, 2023

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Oct 24, 2023

Motivation

Fix #9379

Test Plan

CI does not report hydration issues

Test links

https://deploy-preview-9446--docusaurus-2.netlify.app/

@slorber slorber added the pr: bug fix This PR fixes a bug in a past release. label Oct 24, 2023
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 24, 2023
@netlify
Copy link

netlify bot commented Oct 24, 2023

[V2]

Name Link
🔨 Latest commit b143f19
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/65393c0012d7b9000834a812
😎 Deploy Preview https://deploy-preview-9446--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions
Copy link

github-actions bot commented Oct 24, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 67 🟢 97 🟢 92 🟢 100 🟠 89 Report
/docs/installation 🟠 50 🟢 98 🟢 92 🟢 100 🟠 89 Report
/docs/category/getting-started 🟠 67 🟢 100 🟢 92 🟢 90 🟠 89 Report
/blog 🟠 61 🟢 100 🟢 92 🟢 90 🟠 89 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 49 🟢 97 🟢 92 🟢 100 🟠 89 Report
/blog/tags/release 🟠 59 🟢 100 🟢 92 🟠 80 🟠 89 Report
/blog/tags 🟠 58 🟢 100 🟢 92 🟢 90 🟠 89 Report

@github-actions
Copy link

github-actions bot commented Oct 24, 2023

Size Change: +3 B (0%)

Total Size: 1.13 MB

ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 117 kB 0 B
website/build/assets/css/styles.********.css 113 kB 0 B
website/build/assets/js/main.********.js 862 kB +3 B (0%)
website/build/index.html 41.4 kB 0 B

compressed-size-action

@slorber slorber marked this pull request as draft October 24, 2023 16:41
@slorber slorber closed this Oct 24, 2023
@slorber slorber force-pushed the slorber/fix-v3-hydration-issues-ubuntu branch from 540515d to c6762a2 Compare October 24, 2023 16:47
@slorber slorber deleted the slorber/fix-v3-hydration-issues-ubuntu branch October 24, 2023 16:48
@slorber slorber restored the slorber/fix-v3-hydration-issues-ubuntu branch October 24, 2023 16:51
@slorber slorber deleted the slorber/fix-v3-hydration-issues-ubuntu branch October 24, 2023 16:51
@slorber slorber restored the slorber/fix-v3-hydration-issues-ubuntu branch October 24, 2023 16:51
@slorber slorber reopened this Oct 24, 2023
@johnnyreilly
Copy link
Contributor

I've provided some test data here: #9379 (comment)

@slorber slorber force-pushed the slorber/fix-v3-hydration-issues-ubuntu branch from 387d353 to 72d92ed Compare October 25, 2023 15:49
@slorber slorber changed the title WIP - fix v3 hydration issues on Ubuntu fix(theme): fix useWindowSize React hydration issue Oct 25, 2023
@slorber slorber marked this pull request as ready for review October 25, 2023 15:49
@Josh-Cena
Copy link
Collaborator

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)?

@slorber
Copy link
Collaborator Author

slorber commented Oct 25, 2023

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:
https://twitter.com/sebastienlorber/status/1702578746673295827
https://twitter.com/sebastienlorber/status/1615329010761842689

@slorber slorber merged commit 8d19054 into main Oct 25, 2023
29 of 30 checks passed
@slorber slorber deleted the slorber/fix-v3-hydration-issues-ubuntu branch October 25, 2023 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

v3 site has hydration issues on Ubuntu
4 participants