diff --git a/src/utils/deviceUtils.js b/src/utils/deviceUtils.js index f3a3a1b2..bf6f6bc9 100644 --- a/src/utils/deviceUtils.js +++ b/src/utils/deviceUtils.js @@ -1,19 +1,28 @@ import React from 'react' +import { throttle } from 'lodash' + export const isMobile = () => { if (typeof window === 'undefined') return false return window.innerWidth <= 768 } export const useIsMobile = () => { - const [isMobileView, setIsMobileView] = React.useState(isMobile()) + const [isMobileView, setIsMobileView] = React.useState(false) React.useEffect(() => { - const handleResize = () => { + setIsMobileView(isMobile()) + + const handleResize = throttle(() => { setIsMobileView(isMobile()) - } + }, 200) window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) + window.addEventListener('orientationchange', handleResize) + + return () => { + window.removeEventListener('resize', handleResize) + window.removeEventListener('orientationchange', handleResize) + } }, []) return isMobileView