React Handbook

​x
 
function App () {
  const [isMobile, setIsMobile] = React.useState(false)
  
  React.useEffect(() => {
    window.addEventListener('resize', handleResize, true);
    
    return () => {
      window.removeEventListener('resize', handleResize, true);
    }
  }, [])
  
  const handleResize = React.useCallback((event) => {
    // you can use window's width to recognize a mobile device width
    // you can also use its height to see whether the mode is landscape or portrait
    const width = event.currentTarget.innerWidth
    console.log('Window width:', width)
    setIsMobile(width <= 1024)
  }, [])
  
  return (
    <React.Fragment>
      Resize me to see a console log!
    </React.Fragment>
  )
}
​

You'd use a resize event listener to programatically set whether a page is viewed on a mobile device, for example. You always have to remove the attached event listener in order to prevent leaking, which we do in the useEffect's return. Create a memoized function using useCallback and pass it as the event's handler. You can use any kind of listener this way.

Resize me to see a console log!