a react hook for detecting téléphone

A question I ask myself ever single time I create a new app: ugh OK now how to make sure it looks good on mobile. Well, that was it like 5 years ago, before it was hammered into me by me to always do mobile first. So, the question crops up almost simultaneously with opening a new repo.

I was playing around on v0.dev which can make a legitimately functioning moderately complicated app out of your NL description 9/10 times and has me worried but anyway, in some of the code created, this /hooks file looked mighty stealable. The github link is blocked in my instance of v0, either bc it was actually generated on the fly, or some access issue. Anywho, I'm posting this to remind future me when that question should pop up again.

import * as React from "react";

const MOBILE_BREAKPOINT = 768;

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
    undefined
  );

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    };
    mql.addEventListener("change", onChange);
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    return ()=> mql.removeEventListener("change", onChange);
  }, []);

  return !!isMobile;
}