fix(useMediaQuery): Return boolean describing media query match on first render #1020
Conversation
…rst render instead of undefined This gets rid of the value changing from undefined to boolean on the first renders, which might trigger undesired side-effects for users. BREAKING CHANGE: On first render, boolean is returned instead of undefined. fix #1000
Codecov Report
@@ Coverage Diff @@
## master #1020 +/- ##
=======================================
Coverage 99.61% 99.61%
=======================================
Files 61 61
Lines 1041 1049 +8
Branches 163 166 +3
=======================================
+ Hits 1037 1045 +8
Misses 2 2
Partials 2 2
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
|
One problem - it will cause hydration error for SSR. Initialisation should be flagged via hook parameters. |
Sounds doable. I'll implement this later. |
|
Btw, could you elaborate on how this causes an hydration error? I wasn't aware of this. |
|
SSR will be first-rendered with undefined, client with some value - react will freak out on that. |
|
Also I have an idea to replace all that crap with |
Of course, makes sense! Thanks.
Interesting. Would the users then have to wrap their app in some sort of context provider? |
|
Yes, they should, but in my eyes it is way more convenient that to be sure that you pass proper hook config to each hook that has isomorphic behavior. |
This allows us to give the users the media query match state immediately on first render and optionally give them SSR compatibility. BREAKING CHANGE: Returned value is no longer undefined on first render. Set initializeWithValue to false to re-enable this behavior. fix #1000
|
@xobotyi How about something like I pushed in my last commit? I added |
… optionally with undefined This makes the hook work well with its underlying useMediaQuery hook. Also, many other hooks follow this convention of initializing with correct value by default and optionally with undefined. BREAKING CHANGE: Previously this hook initialized with undefined. Now it initializes by default with the correct hook value. The previous behavior can be enabled by setting the initializeWithValue option to false.
# [20.0.0](v19.2.0...v20.0.0) (2022-12-02) ### Bug Fixes * **useMediaQuery:** add option to martch media query on first render ([#1020](#1020)) ([087b2b1](087b2b1)), closes [#1000](#1000) ### BREAKING CHANGES * **useMediaQuery:** `useMediaQuery` and `useScreenOrientation` now returns matched media query state on first render by default, SSR users can change that behaviour via hook options.
|
🎉 This PR is included in version 20.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
What is the current behavior, and the steps to reproduce the issue?
Described in #1000 .
What is the expected behavior?
The value returned from the hook should be a boolean describing the media query match on first render instead of
undefined.How does this PR fix the problem?
By initializing the state with the the boolean received from
matchMediaand creating aMediaQueryListentry to the cache in the process.Here is a CodeSandbox, which contains the example provided in #1000, but with the new implementation of
useMediaQuery. Note that the animation is no longer triggered when the page loads.This is a breaking change, since the value returned on the first render is now different than before. (Returning
undefinedbefore was not a bug since it was documented)Checklist
useMediaQueryhas the "correct" initial value #1000