Implement Custom useMediaQuery Hook in React

In frontend development, responsive design is crucial to ensure that websites adapt well to various screen sizes and devices. Media queries in CSS help achieve this responsiveness by applying different styles based on the device's characteristics.

However, handling this dynamically in React components can be challenging. To simplify this process, we can create a custom hook called useMediaQuery that allows us to conditionally render components based on the viewport size.

What do you need to know for implementation?

You should know the basic understanding of the implementation of custom hooks and the browser API window.matchMedia(<query>) that helps to determine if the document matches the media query string, as well as to monitor the document to detect when it matches that media query.

Code Implementation of useMediaQuery Custom Hook

Let's start by defining our custom hook useMediaQuery in React:

const useMediaQuery = (query) => {
  const [matches, setMatches] = React.useState(false);

  React.useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    setMatches(mediaQuery.matches);

    const handler = (event) => setMatches(event.matches);

    mediaQuery.addEventListener('change', handler);

    return () => {
      mediaQuery.removeEventListener('change', handler);
    };
  }, [query]);

  return matches;
};

Using the Custom Hook

Now, let's see how we can utilise our custom useMediaQuery hook in a React component:

const ResponsiveComponent = () => {
  const isDesktop = useMediaQuery('(min-width: 1024px)');

  return (
    <div>
      {isDesktop ? <h1>Welcome to Desktop View</h1> : <p>Welcome to Mobile View</p>}
    </div>
  );
};

Explanation

In the example above, we use useMediaQuery to check if the viewport width is at least 1024px, indicating a desktop view. Depending on the result, we render different content accordingly.

Now that you understand this custom hook, let's explore 20+ Most Asked Custom Hooks in React & 100+ top React Interview Questions and Answers to prepare for your next frontend interview 

Happy Coding:)