カスタムフックを作って学ぶ

はじめに

React の カスタムフックを勉強したのですが、具体的な利用シーンのイメージがあまりわかなったので、カスタムフックを作って理解を深めたいと思います。

ウィンドウのサイズを監視し、サイズが変更されたときに状態を更新するカスタムフックを作ってみます。

import { useState, useEffect } from 'react';

const useWindowSize = () => {
// 現在の画面の横幅、縦幅を初期値としてセットします。
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  })

  useEffect(() => {
    const handleResize = () => {
    // ウィンドウのサイズが変更されたときに呼び出され、windowSize状態を現在のウィンドウサイズに更新します。
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
      window.addEventListener('resize', handleResize)
      return () => window.removeEventListener('resize', handleResize);
    }
  }, [])

  return windowSize;  
}

export default useWindowSize;

呼び出し元

import React from 'react';
import useWindowSize from './useWindowSize';

const WindowSizeComponent = () => {
//カスタムフックで渡されたwindowSizeを取得して変数に格納します。 
  const windowSize = useWindowSize()

// 取得した値を表示します。
  return (
    <div>
      <p>Width: {windowSize.width}px</p>
      <p>Height: {windowSize.height}px</p>
    </div>
  )
}
export default WindowSizeComponent

カスタムフックとして処理を共通化しておくことでコードを使い回すことができ、複数のコンポーネントで使いたい場合などに役に立つということがわかりました。