How to detect if screen size has changed to mobile in React?

const [isMobile, setIsMobile] = useState(false)
 
//choose the screen size 
const handleResize = () => {
  if (window.innerWidth < 720) {
      setIsMobile(true)
  } else {
      setIsMobile(false)
  }
}

// create an event listener
useEffect(() => {
  window.addEventListener("resize", handleResize)
})

// finally you can render components conditionally if isMobile is True or False 

What I did is adding an event listener after component mount:

componentDidMount() {
    window.addEventListener("resize", this.resize.bind(this));
    this.resize();
}

resize() {
    this.setState({hideNav: window.innerWidth <= 760});
}

componentWillUnmount() {
    window.removeEventListener("resize", this.resize.bind(this));
}

EDIT: To save state updates, I changed the "resize" a bit, just to be updated only when there is a change in the window width.

resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: currentHideNav});
    }
}

UPDATE: Time to use hooks! If you're component is functional, and you use hooks - then you can use the useMediaQuery hook, from react-responsive package.

import { useMediaQuery } from 'react-responsive';

...

const isMobile = useMediaQuery({ query: `(max-width: 760px)` });

After using this hook, "isMobile" will be update upon screen resize, and will re-render the component. Much nicer!

Using hooks in React(16.8.0+) refering to: https://stackoverflow.com/a/36862446/1075499

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;
}

This is the same as @Ben Cohen answer but after attaching your function to eventListner, also remove it on componentWillUnmount

constructor() {
  super();
  this.state = { screenWidth: null };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener("resize", this.updateWindowDimensions());
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions)
}

updateWindowDimensions() {
   this.setState({ screenWidth: window.innerWidth });
}