Reactでカスタムフックを作成し、コードを再利用する方法

この記事では、Reactでカスタムフックを作成してコードを再利用する方法を紹介します。カスタムフックを使用することで、共通のロジックを切り出し、複数のコンポーネントで使い回すことが可能になります。コードの再利用性を高めるための手法を学びましょう。

カスタムフックとは？その役割と基本

カスタムフックは、Reactのフックを使って、共通するロジックを別のファイルにまとめ、複数のコンポーネントで再利用できる機能です。基本的には通常のJavaScript関数として作成されます。

  
  function useCustomHook() {
    // カスタムフックのロジック
  }
  

カスタムフックを作成する手順

例えば、ブラウザのウィンドウサイズを追跡するカスタムフックを作成してみましょう。このフックは、ウィンドウのリサイズ時にそのサイズを返します。

  
  function useWindowSize() {
    const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

    useEffect(() => {
      const handleResize = () => {
        setSize([window.innerWidth, window.innerHeight]);
      };

      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
  }
  

カスタムフックでコードを再利用する方法

カスタムフックを作成したら、それを使って他のコンポーネントで再利用することができます。例えば、ウィンドウサイズを表示するコンポーネントでこのカスタムフックを使用します。

  
  function DisplayWindowSize() {
    const [width, height] = useWindowSize();

    return (
      

        
Window width: {width}
        
Window height: {height}
      
    );
  }
  

Reactでカスタムフックを作成し、コードを再利用する方法のまとめ

この記事では、Reactのカスタムフックを作成して、コードを再利用する方法を学びました。カスタムフックを使うことで、複雑なロジックを簡潔にまとめ、複数のコンポーネントで効率的に使用することができます。ぜひ、カスタムフックを活用してReact開発をより効率的に進めましょう。