【React】カスタムフック

本記事

基礎について前回書いたので少し踏み込んだ応用内容についても書こうと思います。
その応用内容でも重要そうな「カスタムフック」について紹介します。

フックとは

useStateやuseEffectのようにコンポーネントの状態の取得、変更を行うコンポーネント用の関数のこと

カスタムフックとは

useStateやuseEffect等フックを使った処理をまとめて、独自のフックとして定義すること

カスタムフック定義コード

// カスタムフック：カウント処理＋「自動ログ出力」をまとめたフック
function useCounterWithLog(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);

  // カウントが変わったときに自動でログ出力
  useEffect(() => {
    console.log('現在のカウント:', count);
  }, [count]);

  // 状態（count）と操作（increment）を返す
  // ※自動処理（useEffect）は内部で動く
  return { count, increment };
}

上記カスタムフックを使う側のコード

function Counter() {
  const { count, increment } = useCounterWithLog(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

上記では

• カウント処理(useCount)
• ログ出力（useEffect）
  をまとめて１つのフックにしている。

関数で処理をまとめることと同じく、まとめたことで使用するときの呼び出しも１行で済む。

Codesandbox例

カスタムフックを使う例：入力フォーム
このコード例は、名前とメールを入力するフォームを表示し、入力が正しいかを検証して送信できるようにするサンプルです。フォームの入力状態の取得、バリデーション、リセットといったフォームに関わるロジックをカスタムフック useForm にまとめています。その結果、フォームコンポーネント側は表示（UI）に専念でき、ロジックを一箇所に集約することで可読性と保守性が向上します。

まとめ

カスタムフックに処理を切り出すことで、カウントのロジックを一箇所にまとめられます。その結果、ボタン操作だけでなくタイマーや外部イベント、別コンポーネントからの呼び出しでも同じ実装を再利用でき、コードの重複が減って保守性が向上します。