React のカスタム フックは、コンポーネントから再利用可能な機能を削除するための効果的なツールです。これらは、コードの DRY (Don't Reply Yourself)、保守性、およびクリーンさをサポートします。ただし、便利なカスタム フックを開発するには、React の基本的な考え方と推奨される手順をしっかりと理解する必要があります。この投稿では、React でカスタム フックを開発するための最も優れた戦略のいくつかについて、それらを効率的に適用する方法を説明する例とともに説明します。

1.フックの目的を理解する

カスタム フックの作成に入る前に、フックとは何か、フックが存在する理由を理解することが重要です。フックを使用すると、機能コンポーネントで状態やその他の React 機能を使用できるようになります。カスタム フックを使用すると、コンポーネント ロジックを再利用可能な関数に抽出でき、複数のコンポーネント間で共有できます。

例: 基本的なカスタム フック

カウンターを管理するカスタム フックの簡単な例を次に示します:

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prevCount => prevCount   1);
  const decrement = () => setCount(prevCount => prevCount - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// Usage in a component
// const { count, increment, decrement, reset } = useCounter(10);

2.命名規則に従ってください

React には、カスタム フックが「use」という単語で始まるという規則があります。これは単なるスタイル上の選択ではありません。React はこの規則に依存して、フックのルールを自動的に適用します (フックを条件付きで呼び出さないなど)。

ヒント: React にそれがフックであることを確実に認識させるために、カスタム フックは必ず use で開始してください。

3.フックをピュアに保つ

カスタム フックは純粋な関数である必要があります。つまり、グローバル変数の変更や外部システムとの直接対話などの副作用があってはなりません。 API 呼び出しの実行など、副作用が必要な場合は、useEffect.

例: 副作用のあるフック

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
}

// Usage in a component
// const { data, error, loading } = useFetchData('https://api.example.com/data');

4.既存のフックを活用
カスタム フックを作成するときは、useState、useEffect、useContext などの既存の React フックを必ず利用してください。これにより、カスタム フックがコンポーザブルになり、React の組み込み機能とシームレスに連携できるようになります。

例: フックの結合

ローカル ストレージを管理するために useState と useEffect を組み合わせたカスタム フックは次のとおりです:

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Usage in a component
// const [name, setName] = useLocalStorage('name', 'John Doe');

5.再利用性と構成

カスタム フックを作成する主な理由の 1 つは、再利用性を促進することです。優れたカスタム フックは、大幅な変更を必要とせずに、複数のコンポーネント間で使用できる必要があります。さらに、フックを組み合わせて、より複雑なロジックを構築することもできます。

ヒント: 複数のコンポーネント間で再利用される可能性が高いロジックの抽出に重点を置きます。

6.フックを文書化する

他のコードと同様に、カスタム フックも十分に文書化されている必要があります。フックが何を行うか、どのようなパラメータを受け入れるか、何を返すか、およびフックが引き起こす可能性のある副作用を説明するコメントを含めます。これにより、他の開発者 (そして将来のあなた) がフックを理解し、正しく使用することが容易になります。

例: フックの文書化

/**
 * useCounter
 * 
 * A custom hook to manage a counter.
 *
 * @param {number} initialValue - Initial value of the counter.
 * @returns {object} { count, increment, decrement, reset } - Current count and functions to modify it.
 */
function useCounter(initialValue = 0) {
  // Implementation
}

7.フックをテストする

カスタムフックが期待どおりに動作することを確認するには、テストが不可欠です。フックの単体テストを作成するには、react-hooks-testing-library や Jest などのテスト ライブラリを使用します。

例: フックの基本テスト

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

test('should increment and decrement counter', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(0);
});

アプリケーション全体で機能を抽象化して再利用する効果的な手法の 1 つは、React でカスタム フックを使用することです。フックの目的を理解し、命名規則を遵守し、フックを純粋に保ち、既存のフックを利用し、再利用性を保証し、文書化し、テストすることにより、React 開発プロセスを改善する信頼性が高く保守可能なフックを構築できます。