useQueries.ts

import { useState, useEffect } from 'react';

const DELAY = 400;
const mapQueries = (query: string) => window.matchMedia(query).matches;

function useQueries(queries: string[]): boolean[] {
  const [values, setValues] = useState(queries.map(mapQueries));

  useEffect(() => {
    let timer: number;

    const onResize = () => {
      window.clearTimeout(timer);
      timer = window.setTimeout(() => setValues(queries.map(mapQueries)), DELAY);
    };

    window.addEventListener('resize', onResize);

    return () => {
      window.clearTimeout(timer);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  return values;
}

export default useQueries;

// const [xs, sm] = useQueries([`(min-width: ${SCREENS.xs}px)`, `(min-width: ${SCREENS.sm}px)`]);