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: useMedia SSR hydration bug with defaultState #2216

Merged
merged 2 commits into from
Dec 30, 2021

Conversation

teaguestockwell
Copy link
Contributor

@teaguestockwell teaguestockwell commented Nov 8, 2021

Fix server side render hydration mismatch when a default value is provided to useMedia

Description

Before, in pr #464 when server side rendering a component that used useMedia, the server's initial state would initialize to false, but then when React hydrated this on the client, it would initialize to the result of the media query. This caused bug #1885 because When React hydrates the server render, it may not match the client's state. The React docs have a little more info on why this can lead to perf issues as well.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as before)

Checklist

  • Read the Contributing Guide
  • Perform a code self-review
  • Comment the code, particularly in hard-to-understand areas
  • Add documentation
  • Add hook's story at Storybook
  • Cover changes with tests
  • Ensure the test suite passes (yarn test)
  • Provide 100% tests coverage
  • Make sure code lints (yarn lint). Fix it with yarn lint:fix in case of failure.
  • Make sure types are fine (yarn lint:types).

Prevent a React hydration mismatch when a default value is provided
by not defaulting to window.matchMedia(query).matches.
Copy link
Owner

@streamich streamich left a comment

Choose a reason for hiding this comment

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

Thank you!

@streamich streamich merged commit 5c01189 into streamich:master Dec 30, 2021
streamich pushed a commit that referenced this pull request Dec 30, 2021
## [17.3.2](v17.3.1...v17.3.2) (2021-12-30)

### Bug Fixes

* useMedia SSR hydration bug with defaultState ([#2216](#2216)) ([5c01189](5c01189))
@streamich
Copy link
Owner

🎉 This PR is included in version 17.3.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants