A react hook to make a media query

useMediaQuery.ts

import { DependencyList, useEffect, useState } from "react";

/**
 * Takes in the handler function, subscribes it to any functions you need, and then returns a cleanup function.
 */
export type eventSetup_fn = (handler: ()=>void) => (()=>void); // looks nasty cause react doesn't export Destructor type

/**
 * Performs a media query and returns the result.
 * Event setup allows you to subscribe to any events that the media query may depend on,
 * return a cleanup fn from the event setup
 * deps is optional dependencies for the useEffect hook
 * @param query 
 * @param eventSetup 
 * @param deps 
 * @returns 
 */
export const useMediaQuery = (
    query: Parameters<typeof window.matchMedia>[0],
    eventSetup: eventSetup_fn,
    deps: DependencyList = []) => {
    const [result, setResult] = useState<ReturnType<typeof window.matchMedia>>();

    useEffect(() => {
        const handler = () => setResult(window.matchMedia(query));
        if (result == undefined) handler();
        return eventSetup(handler);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [eventSetup, query, result, ...deps]);

    return result;
}

This is free to use code, you may include it in a project. But I will not offer assistance for errors, and please keep in mind the useEffect(...) is prone to loops.