【React】カスタムフック で作る useBool

こんにちは、 Gaji-Labo フロントエンドエンジニアの茶木です。

Reactのフックって素敵ですよね。状態と描画の一致という理念と、ユーザー入力やAPIの非同期処理など実際的な「どうするんだこれ」を解決する仕組みです。

この素敵なフックを自作するカスタムフックについて述べます。

この記事の目的

• カスタムフックの良さを理解する
• 簡単なカスタムフックのサンプル useBool を作ってみる

カスタムフックの良さ

よく使う形をシンプルに書きたいときがあります。たとえば、モーダルの開閉を管理しようとするとき useState では以下のように書けます。

const [modalOpened, setModalOpened] = useState(false);
const openModal = () => setModalOpened(true);
const closeModal = () => setModalOpened(false);

useBool のようなフックがあったとして、戻り値の配列が順に、
[ state, stateをtrueにする, stateをfalseにする ]
であったとすれば、以下のように一行で書けちゃいますよね。

const [modalOpened, openModal, closeModal] = useBool(false);

この useBool がカスタムフックです。

useBoolを作ってみる

上記の useBool を実現する実装は以下のようになります。簡単ですね！

const useBool = (defaultValue: boolean) => {
  const [value, setValue] = useState(defaultValue);
  return [value, () => setValue(true), () => setValue(false)];
}

なお、カスタムフックは命名規則にルールがあり use で始める必要があります。 こうしておくことで、適切な設定がなされたエディタやコンソールで、通常のフックと同じように フック特有の問題でも warning が表示されるようになります。

まとめ

既存のフックだけでも充実しているため、カスタムフックは必須ではないのですが、うまく使うと可読性やメンテナンス向上に繋げていけそうですね。

参考: 独自フック https://ja.reactjs.org/docs/hooks-custom.html