import { useState, useLayoutEffect } from 'react'

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState([null, null])

  useLayoutEffect(() => {
    window.addEventListener('resize', (e) => {
      setWindowSize([window.innerWidth, window.innerHeight])
    })

    setWindowSize([window.innerWidth, window.innerHeight])

    return () => window.removeEventListener('resize', (e) => {
      setWindowSize([window.innerWidth, window.innerHeight])
    })
  }, [])

  return { windowSize }
}

export default useWindowSize