3 files changed, 50 insertions, 28 deletions
diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
index 08c4b310..9042a766 100644
--- a/src/core/components/views/DesktopView.jsx
+++ b/src/core/components/views/DesktopView.jsx
@@ -1,24 +1,17 @@
+import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
 const DesktopView = ({ children }) => {
+  const { isDesktop } = useDevice()
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= 768) {
-        setView(children)
-      } else {
-        setView(<></>)
-      }
+    if (isDesktop) {
+      setView(children)
+    } else {
+      setView(<></>)
     }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [children])
+  }, [isDesktop, children])
 
   return view
 }
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
index 348572c6..0c8a806c 100644
--- a/src/core/components/views/MobileView.jsx
+++ b/src/core/components/views/MobileView.jsx
@@ -1,24 +1,17 @@
+import useDevice from '@/core/hooks/useDevice'
 import { useEffect, useState } from 'react'
 
 const MobileView = ({ children }) => {
+  const { isMobile } = useDevice()
   const [view, setView] = useState(<></>)
 
   useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 768) {
-        setView(children)
-      } else {
-        setView(<></>)
-      }
+    if (isMobile) {
+      setView(children)
+    } else {
+      setView(<></>)
     }
-
-    handleResize()
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [children])
+  }, [isMobile, children])
 
   return view
 }
diff --git a/src/core/hooks/useDevice.js b/src/core/hooks/useDevice.js
new file mode 100644
index 00000000..ca11610d
--- /dev/null
+++ b/src/core/hooks/useDevice.js
@@ -0,0 +1,36 @@
+const { useState, useEffect } = require('react')
+
+const useDevice = () => {
+  const [isMobile, setIsMobile] = useState(false)
+  const [isDesktop, setIsDesktop] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setIsMobile(true)
+      } else {
+        setIsMobile(false)
+      }
+
+      if (window.innerWidth >= 768) {
+        setIsDesktop(true)
+      } else {
+        setIsDesktop(false)
+      }
+    }
+
+    handleResize()
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    isMobile,
+    isDesktop
+  }
+}
+
+export default useDevice