React hook - useDebouncedWindowResize

useDebouncedWindowResize.ts

import { useState } from "react";
import { useMount, usePrevious, useToggle } from "react-use";

export function debounce(func: Function, timeout = 300) {
  let timer: any;
  return (...args: any[]) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, timeout);
  };
}

/**
 * Unit: ms
 */
const WINDOW_RESIZE_DEBOUNCE_TIME = 1000;

export const useDebouncedWindowResize = (debounceTime: number = WINDOW_RESIZE_DEBOUNCE_TIME) => {
  const [size, setSize] = useState<{ width: number; height: number }>({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const [resizeTrigger, toggleResize] = useToggle(false);
  const prevResizeTrigger = usePrevious(resizeTrigger);
  const resized = resizeTrigger !== prevResizeTrigger && prevResizeTrigger !== undefined;

  useMount(() => {
    function handleWindowResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
      toggleResize();
    }

    const handleDebouncedWindowResize = debounce(handleWindowResize, debounceTime);

    window.addEventListener("resize", handleDebouncedWindowResize);

    return () => {
      window.removeEventListener("resize", handleDebouncedWindowResize);
    };
  });

  return {
    ...size,
    resized,
  };
};