fix(use-breakpoint): remove rules-of-hooks warning (#1148)

mg901 · Jan 19, 2022 · 17c1c88 · 17c1c88
1 parent b5fe5a3
commit 17c1c88
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/hooks/use-breakpoint.js b/hooks/use-breakpoint.js
@@ -4,15 +4,13 @@ exports.createUseBreakpoint =
   ({ theme: useTheme }) =>
   (breakpoint) => {
     const [isBreak, setIsBreak] = useState(null);
-    // Get the media query to match
-    const query = useMemo(
-      () =>
-        breakpoint({
-          theme: useTheme(),
-        }).replace(/^@media\s*/, ''),
-      [breakpoint]
+    const mediaQuery = breakpoint({
+      theme: useTheme(),
+    });
+    const mq = useMemo(
+      () => window.matchMedia(mediaQuery.replace(/^@media\s*/, '')),
+      [mediaQuery]
     );
-    const mq = useMemo(() => window.matchMedia(query), [query]);
 
     useEffect(() => {
       const handleChange = (event) => {
@@ -37,7 +35,7 @@ exports.createUseBreakpoint =
       return () => {
         mq.removeEventListener('change', handleChange);
       };
-    }, [query, mq]);
+    }, [mq]);
 
     return isBreak;
   };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "styled-breakpoints",
-  "version": "11.0.2",
+  "version": "11.0.3-alpha.5",
   "description": "Simple and powerfull css breakpoints for styled-components and emotion",
   "main": "index.js",
   "types": "index.d.ts",