【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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


投稿者 Chaki Hironori

webライターもやってるフロントエンドエンジニアです。Reactは自信があります。またデザイン畑の出身で、気持ちのいいアニメーションやインタラクティブな表現は丁寧に手掛けます。好きなものは中南米の遺跡で、スペイン語が少しできます。