Skip to main content

カスタムフック

カスタムフックとは​

カスタムフック（ Custom hook, hooks ）とはその名の通り、自分がカスタムして作るフック。 公式ドキュメントを見ると以下のように説明されている。

自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。

例えば、カウンターを行う処理をカスタムフックで実装する

普通​

App.js
import { useState } from "react";

export const App = () => {
  const [count, setCount] = useState(0);
  // カウントアップ
  const incrementCount = () => setCount((count) => count + 1);
  // カウントダウン
  const decrementCount = () => setCount((count) => count - 1);

  return (
    <div>
      <p>{count}</p>
      <button onClick={incrementCount}>+1</button>
      <button onClick={decrementCount}>-1</button>
    </div>
  );
};

カスタムフック​

hooks.js
import { useState } from "react";

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

  // カウントアップ
  const incrementCount = () => setCount((count) => count + 1);

  // カウントダウン
  const decrementCount = () => setCount((count) => count - 1);

  return {count, incrementCount, decrementCount };
};
App.js
import { useCounter } from "./hooks";

export const App = () => {
  const {count, incrementCount, decrementCount } = useCounter();

  /**
   * stateやカウントアップの関数を記載する必要がない
   */

  return (
    <div>
      <p>{count}</p>
      <button onClick={incrementCount}>+1</button>
      <button onClick={decrementCount}>-1</button>
    </div>
  );
};

このように、UIとロジックを分離することができる。
これによって、コンポーネント内の記述がかなり簡潔に書くことができる。

カスタムフックのメリット​

  • UIとロジックを分離できる
    • コンポーネントの肥大化を抑えられる
    • ロジックを再利用できる
    • テストが容易になる
  • 複数のhooksをまとめることができる

カスタムフックのポイント​

関数名はuseから始め、大文字を続ける​

React hooksは、すべてuse〇〇から始まる。
そのため、自作のReact hooksであるカスタムフックも必ずuse〇〇という命名ルールに従う必要がある。

例えば、useCounter

カスタムフックはstate自体ではなく、stateを使うロジックを共有する​

カスタムフックは、state自体ではなく、stateを扱うロジックを共有できるようにするためのものである。
フックの呼び出しは、同じフックの他の場所からの呼び出しとは完全に独立している。
そのため、stateの状態は共有はされない。

カスタムフックで値を共有したい場合は、React Context APIやRecoilを使用した関数を作成することで実現できる。