fix(useMediaQuery): Return boolean describing media query match on first 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

Author: ArttuOll

src/useMediaQuery/__docs__/story.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Example } from './example.stories';
-import { ImportPath } from '../../__docs__/ImportPath';
+import {Canvas, Meta, Story} from '@storybook/addon-docs';
+import {Example} from './example.stories';
+import {ImportPath} from '../../__docs__/ImportPath';
 
 <Meta title="Sensor/useMediaQuery" component={Example} />
 
@@ -36,4 +36,3 @@ export function useMediaQuery(query: string): boolean | undefined;
 #### Return
 
 `boolean` - `true` in case document matches media query, `false` otherwise.
-`undefined` - initially, when media query isn't matched yet.

src/useMediaQuery/__tests__/dom.ts

@@ -54,10 +54,9 @@ describe('useMediaQuery', () => {
     expect(result.error).toBeUndefined();
   });
 
-  it('should return undefined on first render', () => {
+  it('should return value on first render', () => {
     const { result } = renderHook(() => useMediaQuery('max-width : 768px'));
-    expect(result.all.length).toBe(2);
-    expect(result.all[0]).toBe(undefined);
+    expect(result.all.length).toBe(1);
     expect(result.current).toBe(false);
   });
 

src/useMediaQuery/useMediaQuery.ts

@@ -1,5 +1,5 @@
-import { Dispatch, useEffect } from 'react';
-import { useSafeState } from '../useSafeState/useSafeState';
+import { Dispatch, useEffect, useState } from 'react';
+import { isBrowser } from '../util/const';
 
 const queriesMap = new Map<
   string,
@@ -8,24 +8,28 @@ const queriesMap = new Map<
 
 type QueryStateSetter = (matches: boolean) => void;
 
+const createQueryEntry = (query: string) => {
+  const mql = matchMedia(query);
+  const dispatchers = new Set<QueryStateSetter>();
+  const listener = () => {
+    dispatchers.forEach((d) => d(mql.matches));
+  };
+
+  if (mql.addEventListener) mql.addEventListener('change', listener, { passive: true });
+  else mql.addListener(listener);
+
+  return {
+    mql,
+    dispatchers,
+    listener,
+  };
+};
+
 const querySubscribe = (query: string, setState: QueryStateSetter) => {
   let entry = queriesMap.get(query);
 
   if (!entry) {
-    const mql = matchMedia(query);
-    const dispatchers = new Set<QueryStateSetter>();
-    const listener = () => {
-      dispatchers.forEach((d) => d(mql.matches));
-    };
-
-    if (mql.addEventListener) mql.addEventListener('change', listener, { passive: true });
-    else mql.addListener(listener);
-
-    entry = {
-      mql,
-      dispatchers,
-      listener,
-    };
+    entry = createQueryEntry(query);
     queriesMap.set(query, entry);
   }
 
@@ -54,12 +58,19 @@ const queryUnsubscribe = (query: string, setState: QueryStateSetter): void => {
 /**
  * Tracks the state of CSS media query.
  *
- * Return undefined initially and later receives correct value.
- *
  * @param query CSS media query to track.
  */
 export function useMediaQuery(query: string): boolean | undefined {
-  const [state, setState] = useSafeState<boolean>();
+  const [state, setState] = useState<boolean | undefined>(() => {
+    if (isBrowser) {
+      let entry = queriesMap.get(query);
+      if (!entry) {
+        entry = createQueryEntry(query);
+        queriesMap.set(query, entry);
+      }
+      return entry.mql.matches;
+    }
+  });
 
   useEffect(() => {
     querySubscribe(query, setState);