React hook to check if user is on a Mobile devive

useUserDevice.tsx

import { useEffect, useState, useRef } from 'react'

const MOBILE_BREAKPOINT = 640
let defaultWindowWidth = 0

/* 
  If using Nextjs, the following validation is necessary to ensure that we only try
  to access the innerWidth when our code is running on user browser (client-side)
*/
if (typeof window !== 'undefined') {
  defaultWindowWidth = window.innerWidth
}

export const useUserDevice = () => {
  const isMounted = useRef(false)
  const [windowWidth, setWindowWidth] = useState(defaultWindowWidth)

  const handleWindowResize = () =>
    isMounted && setWindowWidth(window.innerWidth)

  useEffect(() => {
    isMounted.current = true
    setWindowWidth(window.innerWidth)
    window.addEventListener('resize', handleWindowResize)

    return () => {
      isMounted.current = false
      window.removeEventListener('resize', handleWindowResize)
    }
  }, [])

  return { 
    isMobile: windowWidth <= MOBILE_BREAKPOINT, 
    width: windowWidth
  }
}