Merge pull request #948 from wereHamster/fix-924

useBreakpointIndex: Do not depend on window during setState initialization

Author: jxnblk

packages/match-media/src/index.ts

@@ -12,39 +12,34 @@ export const useBreakpointIndex = (options: defaultOptions = {}) => {
   const breakpoints =
     (context.theme && context.theme.breakpoints) || defaultBreakpoints
 
-  const getIndex = useCallback(() => {
-    if (typeof window === 'undefined') {
-      if (typeof defaultIndex === 'number') {
-        if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
-          throw new RangeError(
-            `Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`
-          )
-        }
-        return defaultIndex
-      }
-      throw new TypeError(
-        `Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`
-      )
-    }
-
-    return breakpoints.filter(
-      breakpoint =>
-        window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
-    ).length
-  }, [breakpoints, defaultIndex])
-
-  const [value, setValue] = useState(getIndex)
-
+  if (typeof defaultIndex !== 'number') {
+    throw new TypeError(
+      `Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`
+    )
+  } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
+    throw new RangeError(
+      `Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`
+    )
+  }
+
+  const [value, setValue] = useState(defaultIndex)
   useEffect(() => {
+    const getIndex = () =>
+      breakpoints.filter(
+        (bp) => window.matchMedia(`screen and (min-width: ${bp})`).matches
+      ).length
+
     const onResize = () => {
       const newValue = getIndex()
       if (value !== newValue) {
         setValue(newValue)
       }
     }
+
+    onResize()
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
-  }, [breakpoints, getIndex, value])
+  }, [breakpoints, value])
 
   return value
 }