refactor: update media query event listeners

adamalston · Jan 18, 2025 · 9780737 · 9780737
1 parent c0f4be4
commit 9780737
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -10,20 +10,20 @@ export const App = () => {
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    const updateIsMobile = () => {
-      const { matches } = matchMedia(
-        '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)',
-      );
+    const mediaQuery =
+      '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)';
+    const mediaQueryList = window.matchMedia(mediaQuery);
 
-      setIsMobile(matches);
+    const updateIsMobile = () => {
+      setIsMobile(mediaQueryList.matches);
     };
 
     updateIsMobile();
 
-    window.addEventListener('resize', updateIsMobile);
+    mediaQueryList.addEventListener('change', updateIsMobile);
 
     return () => {
-      window.removeEventListener('resize', updateIsMobile);
+      mediaQueryList.removeEventListener('change', updateIsMobile);
     };
   }, []);