From 17c1c8810913ff6e9b9d8be25dca61dd4edabdbc Mon Sep 17 00:00:00 2001
From: Maxim <mgreen097@gmail.com>
Date: Wed, 19 Jan 2022 20:12:28 +0300
Subject: [PATCH] fix(use-breakpoint): remove rules-of-hooks warning (#1148)

---
 hooks/use-breakpoint.js | 16 +++++++---------
 package.json            |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/hooks/use-breakpoint.js b/hooks/use-breakpoint.js
index 09f1e19a..07a72764 100644
--- 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
index ddce9324..c3fff6c4 100644
--- 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",