useViewportSize.js

import { useState, useLayoutEffect } from "react";

export const useViewportSize = (debounceTime = 250) => {
  const [viewportSize, setViewportSize] = useState({
    width: undefined,
    height: undefined
  });
  const debounce = (fn, ms) => {
    let timer;
    return () => {
      if (timer !== null)
        clearTimeout(timer);
      timer = window.setTimeout(() => {
        timer = null;
        fn();
      }, ms);
    };
  };
  useLayoutEffect(() => {
    const debouncedHandleResize = debounce(() => {
      setViewportSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }, debounceTime);
    window.addEventListener("resize", debouncedHandleResize);
    debouncedHandleResize();
    return () => window.removeEventListener("resize", debouncedHandleResize);
  });
  return viewportSize;
};