Detecting Screen Size Changes for Mobile Responsiveness in React

Introduction

In React development, responsive design is essential for providing an optimal user experience across various devices. A common requirement is to detect when the screen size enters a mobile breakpoint, such as when the width is less than or equal to 760 pixels, to adjust the user interface, for example, by collapsing a sidenav. This article details multiple approaches to achieve this.

Method 1: Using Event Listeners in Class Components

In class components, you can add an event listener for the resize event on the window object. Typically, this is set up in the componentDidMount lifecycle method and cleaned up in componentWillUnmount to prevent memory leaks.

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

This method updates the state whenever the window is resized, setting hideNav to true if the width is 760 pixels or less.

Optimizing State Updates

To improve performance, you can optimize state updates by only triggering re-renders when the detection condition changes. Modify the resize function as follows:

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

This ensures that the state is updated only when the mobile detection condition changes, reducing unnecessary re-renders.

Method 2: Implementing with Hooks in Functional Components

With the introduction of Hooks in React, functional components can now manage state and side effects. Here's how to implement the same functionality using the useState and useEffect hooks.

const [isMobile, setIsMobile] = useState(false);

const handleResize = () => {
  if (window.innerWidth < 720) {
      setIsMobile(true);
  } else {
      setIsMobile(false);
  }
};

useEffect(() => {
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

This approach uses useEffect to add and remove the event listener, similar to lifecycle methods in class components.

Using the React-Responsive Library

A more elegant solution is to use the react-responsive library, which provides a useMediaQuery hook. This hook automatically handles media queries and updates the state on window resize.

import { useMediaQuery } from 'react-responsive';

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

After using this hook, isMobile will be updated upon screen resize, and the component will re-render accordingly. This method is cleaner and reduces boilerplate code.

Conclusion

Detecting screen size changes for mobile responsiveness in React can be achieved through various methods, from manual event listeners to using libraries like react-responsive. The choice depends on the component type and preferences for simplicity versus customization. Optimizing state updates is crucial for performance, and using Hooks or external libraries can streamline the implementation process.