Return media query value from useMedia on initial render

src/useMedia.tsx

@@ -1,37 +1,48 @@
-import { useState, useEffect } from 'react';
+import React from 'react';
 import json2mq from 'json2mq';
 
 export function useMedia(
   query: string | { [key: string]: any },
-  defaultMatches = true
+  defaultMatches: boolean = true
 ) {
-  const [matches, setMatches] = useState(defaultMatches);
+  const mediaQueryList = React.useRef<MediaQueryList | undefined>(undefined);
 
-  useEffect(
+  const [matches, setMatches] = React.useState(() => {
+    if (typeof window !== 'object') {
+      return defaultMatches;
+    }
+
+    mediaQueryList.current = window.matchMedia(
+      typeof query === 'string' ? query : json2mq(query)
+    );
+
+    return !!mediaQueryList.current.matches;
+  });
+
+  React.useEffect(
     () => {
-      const mediaQueryList = window.matchMedia(
-        typeof query === 'string' ? query : json2mq(query)
-      );
-      let active = true;
+      // mediaQueryList.current will only be undefined on the server
+      const currentMediaQueryList = mediaQueryList.current!;
 
+      let active = true;
       const listener = () => {
         if (!active) {
           return;
         }
 
-        if (mediaQueryList.matches) {
+        if (currentMediaQueryList.matches) {
           setMatches(true);
         } else {
           setMatches(false);
         }
       };
 
-      mediaQueryList.addListener(listener);
-      setMatches(mediaQueryList.matches);
+      currentMediaQueryList.addListener(listener);
+      setMatches(matches);
 
       return () => {
         active = false;
-        mediaQueryList.removeListener(listener);
+        currentMediaQueryList.removeListener(listener);
       };
     },
     [query]