This custom hook will allow me to easily check if the current screen size matches a specific media query (e.g., desktop or mobile). By using this hook, I can conditionally render components based on the screen size and optimize my app for different devices.

useMediaQuery.js

//=== Custom Hook useMediaQuery
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    /* window.matchMedia() match if the media query you passed
       is match with current media query and return boolean value
    */

    if (mediaQuery.matches !== matches) {
      setMatches(mediaQuery.matches);
    }

    const listener = () => setMatches(mediaQuery.matches);

    mediaQuery.addListener(listener);

    return () => mediaQuery.removeListener(listener);
  }, [query, matches]);

  return matches; //=== return boolean value.
};

//=== Usage
import { useMediaQuery } from './useMediaQuery';

const App = () => {
  const isSmallScreen = useMediaQuery('(max-width: 768px)');

  return (
    <div>
      {isSmallScreen ? (
        <h1>Mobile view</h1>
      ) : (
        <h1>Desktop view</h1>
      )}
    </div>
  );
};

export default App;