【メモ】resizeイベントで変更されたウィンドウの幅を取得するhooks

ウィンドウリサイズイベントで変更されたウィンドウの幅を取得するhooksのメモ

リサイズしたとき無駄に発火しないように setTimeout() を入れています。

// useWindowWidth.ts

import { useCallback, useLayoutEffect, useState } from "react";

/**
 * resizeイベントで変更されたウィンドウの幅を取得する
 * @param {number} ms - イベント発火後のdelay
 * @returns {number} window width
 */
export const useWindowWidth = (ms: number = 200): number => {
  const [width, setWidth] = useState(0);

  const updateWidth = useCallback(() => {
    const timeout = setTimeout(() => {
      setWidth(window.innerWidth);
    }, ms);
    return () => clearTimeout(timeout);
  }, [ms, setWidth]);

  useLayoutEffect(() => {
    window.addEventListener("resize", updateWidth);
    updateWidth();
    return () => window.removeEventListener("resize", updateWidth);
  }, [updateWidth]);

  return width;
};

// hooksつかいかた

import { useEffect } from "react";

const windowWidth = useWindowWidth();

// ウィンドウリサイズのたびにconsole.logが表示される
useEffect(() => console.log(windowWidth), [windowWidth]);