Ensure that `useMediaQuery` has the "correct" initial value

[Kyzegs]

New Features

What is the new or updated feature that you are suggesting?

Ensure that useMediaQuery returns the matched value for the given query in the first render.

Why should this feature be included?

In most cases, we do not want to load our animations on the initial page load. When we have a component with animations that relies on the useMediaQuery hook the following happens: The animation gets triggered because of the value from the hook changes. I've tried this with my animation implementation and libraries such as Framer Motion.

Having the correct initial value would fix this problem.

[Kyzegs]

I'll try to have an environment with the issue up later today.

[Kyzegs]

Here's the environment with the issue.

[ArttuOll]

I looked into this and I understand your problem. I'm currently trying to figure out a solution.

[xobotyi]

🎉 This issue has been resolved in version 20.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[kylemh]

I wanted to suggest reverting this and/or thinking about it more. I've just upgraded this package to the latest version and have to replace all my usages of useMediaQuery to include a second argument of { initializeWithValue: false } in order to work in an SRR-based environment.

One suggestion might be to adjust this line:

if (options?.initializeWithValue ?? true)

to be:

if (typeof window !== 'undefined' && (options?.initializeWithValue ?? true))

I think this still appeases the original request without ruining the DX for people that use this hook with Next.js or Remix.

[xobotyi]

Your variant will cause hydration error, since SSR state and browser one will differ.

[kylemh]

I see. I didn't think about strict mode... I'm not sure what the workaround is, but it really sucked to be punished by this change.

[xobotyi]

Overall - i've missed it during review, since all other hook causes hydration error on missconfig rather than SSR crash.

@ArttuOll please, add isBrowser guard to the code so SSR at least works.

[ArttuOll]

No problem. I'll take a look later today.