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

Question

I am developing a web app with React and need to detect when the screen size has entered the mobile break-point in order to change the state.

Specifically I need my sidenav to be collapsed when the user enters mobile mode and that is controlled with a boolean stored in the state within the component.

Answer 1

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!