Hooks

useIsMobile.js

import { useState, useEffect } from "react"
import useWindowDimensions from "./useWindowDimensions"

const useIsMobile = () => {
  const { width } = useWindowDimensions()
  const [isMobile, setMobile] = useState(
    window.innerHeight >= 900 ? false : true
  )

  useEffect(() => {
    width >= 900 ? setMobile(false) : setMobile(true)
  }, [width])

  return { isMobile }
}

export default useIsMobile

useIsMobile2.js

import { useState, useEffect } from "react"

const useIsMobile = () => {
  const [isMobile, setIsMobile] = useState()

  useEffect(() => {
    const innerWidth = window.innerWidth
    innerWidth <= 768 ? setIsMobile(true) : setIsMobile(false)
  }, [])

  return isMobile
}

export default useIsMobile

useWindowDimensions.js

import { useState, useEffect } from "react"

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window
  return {
    width,
    height,
  }
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  )

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions())
    }

    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  return windowDimensions
}