カスタムフック入門: Reactで再利用可能なロジックを作成する

React のフックは、関数コンポーネント内で状態やライフサイクルなどのReactの機能を接続するためのものです。

カスタムフックはこれらのフックを組み合わせて、独自の再利用可能なフックを作成する方法です。

この記事では、カスタムフックの基本的な作成方法と、具体的なカスタムフックの例を通じてその使い方を解説します。

カスタムフックとは？

カスタムフックは、Reactの標準フック（useState, useEffect, useContextなど）を組み合わせて新しく作成されたフックです。これにより、コンポーネント間で状態管理や副作用のロジックを簡単に共有できるようになります。

カスタムフックの作成方法

カスタムフックは、通常の関数ですが、その名前はuseで始まる必要があります。これはReactがフックと認識するための命名規則です。

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

以下の例では、useCounterというカスタムフックを作成し、カウンター機能を実装しています。

import { useState, useCallback } from 'react';

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

  const increment = useCallback(() => setCount((x) => x + 1), []);
  const decrement = useCallback(() => setCount((x) => x - 1), []);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);

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

利用例

import { useCounter } from "./hooks/useCounter";

export default function Counter() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

この例では、useCounterフックを利用して、カウンターの状態とそれを更新する関数を提供しています。これにより、同じカウンターロジックを他のコンポーネントでも簡単に再利用できます。

カスタムフックの利点

• ロジックの再利用:

カスタムフックを使用することで、異なるコンポーネント間で状態管理や副作用のロジックを簡単に共有できます。

• コンポーネントのシンプル化:

複数のフックや複雑なロジックをカスタムフックにまとめることで、コンポーネント自体は見通し良く簡潔に保てます。

• テスタビリティの向上:

独立したロジックを持つカスタムフックは、単体でテストしやすくなります。

まとめ

カスタムフックはReactアプリケーションの設計において非常に強力なツールです。

これを利用することで、コードの再利用性を高め、メンテナンスの効率を向上させることができます。

是非、この機能を積極的に活用して、よりクリーンで管理しやすいコードベースを目指しましょう。