Handle responsiveness using javascript in React Functional component (with hooks)

app.js

import React,{useState,useEffect} from 'react'
export default function App(){
    const [isMobile, setIsMobile] = useState(false)
    useEffect(() => {
        window.addEventListener('resize', handleWindowResize);
        return () => {
            window.removeEventListener('resize', handleWindowResize);
        }
    }, [])
    const handleWindowResize = () => {
        setIsMobile(window.innerWidth < 480)
    }
    
 return(<>
        {isMobile?
         <MobileLayoutComponent />
         :
         <DesktopLayoutComponent />
        }
       </>) 
}