Cleaner Efficient Code with Hooks and Functional Programming - Fixing Wrapper Hell with hooks - component turned into a custom hook

useMedia.js

import { useState, useEffect } from "react";

export default function(query) {
  let [matches, setMatches] = useState(window.matchMedia(query).matches);

  useEffect(() => {
    let media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [query, matches]);

  return matches;
}