カスタムフックを作成してReactアプリをもっと効率化する方法

作成日 2025.01.09
React
React

カスタムフックを使用すると、Reactコンポーネントのロジックを再利用可能な形で抽出し、コードをよりシンプルでメンテナンスしやすくできます。この記事ではカスタムフックの作成方法と実用例を紹介します。

1. カスタムフックとは何か
2. カスタムフックの基本構造
3. 状態管理をカスタムフックで抽出
4. APIリクエスト用のカスタムフック
5. フォーム入力管理のカスタムフック
6. カスタムフックの引数と戻り値
7. カスタムフックのテスト
8. エラーハンドリングを組み込む
9. 依存関係の管理
10. 再利用性の向上
11. React DevToolsでカスタムフックをデバッグ
12. パフォーマンスの最適化
13. よく使われるカスタムフックの例
14. まとめ

カスタムフックとは何か

カスタムフックはReactのフックを組み合わせて作成される再利用可能な関数です。`use`で始まる名前を付けるのが一般的です。

カスタムフックの基本構造

カスタムフックは通常、関数として定義され、他のフックを内部で使用します。

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [state, setState] = useState(null);

  useEffect(() => {
    // サイドエフェクト処理
  }, []);

  return state;
}

状態管理をカスタムフックで抽出

コンポーネントから状態管理ロジックを抽出して再利用します。

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

  useEffect(() => {
    const handleResize = () => setSize(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

APIリクエスト用のカスタムフック

データ取得ロジックをカスタムフックとして抽出します。

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(result => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

フォーム入力管理のカスタムフック

フォーム状態を管理するカスタムフックを作成します。

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  return { values, handleChange };
}

カスタムフックの引数と戻り値

引数を活用してフックの柔軟性を高めます。

カスタムフックのテスト

JestやReact Testing Libraryを使用してカスタムフックをテストします。

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment counter', () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});