import { useEffect , useState } from "react" ; import { throttle } from "throttle-debounce" ; const useWindowWidth = ( ) : number | undefined => { const isClient = typeof window !== "undefined" ; const getWidth = ( ) => { if ( ! isClient ) { return undefined ; } return window . innerWidth ; } ; const [ windowWidth , setWindowWidth ] = useState ( getWidth ) ; useEffect ( ( ) => { if ( ! isClient ) { return undefined ; } const handleResize = throttle ( 16 , ( ) => { setWindowWidth ( getWidth ( ) ) ; } ) ; window . addEventListener ( "resize" , handleResize ) ; return ( ) => window . removeEventListener ( "resize" , handleResize ) ; } , [ ] ) ; return windowWidth ; } ; export default useWindowWidth ;