Reactのカスタムフックについて

Reactで使用されるカスタムフックについて学んだものをまとめます。

公式ドキュメント

カスタムフックとは？

Reactでは、多くのHooks（関数）が提供されています。
さらに、開発者が独自でHooksを作ることができます。そのHooksのことをカスタムフックと呼んでいます。

考える人

わざわざカスタムフックを使う理由ってなに？？

また、カスタムフックを使用する際には、ルールがあるので気をつけておきましょう。

1. ファイル名・関数名をuseから始める（慣習）
2. 関数は基本的に、useCallbackでメモ化する
3. 基本的に、変数や関数を複数返却するので、配列やオブジェクトでまとめて返却する

ということで、実際にカスタムフックを使ってみようと思います。

実装例

今回は、モーダルの実装をカスタムフックを使って行ってみます。実際に動くコードも最後に貼り付けておきます。カスタムフックを使わない例を記述した後に、カスタムフックにしていこうと思います。

まずは、カスタムフックを使わないときの最終的なファイル構成は、以下の通りになります。

 components
┗┗modal
　┗Modal.jsx
App.jsx

まずは、App.jsxに下記の通り記述します。ボタンを押した時に、toggle関数が実行されて、isShowの状態を切り替えております。

そのstateをModalコンポーネントに渡しています。

import "./styles.css";
import { useState } from "react";
import { Modal } from "./components/modals/Modal";

export default function App() {
  const [isShow, isSetShow] = useState(false);
  const toggle = () => {
    isSetShow(!isShow);
  };
  return (
    <div className="App">
      <h1>モーダルを開く</h1>
      <button onClick={toggle}>ボタン</button>
      <Modal isShow={isShow} />
    </div>
  );
}

そして、isShowのStateを受け取るModalコンポーネントの記述です。
3項演算子でtrueのときに表示、falseのときにはnullを返すように記述しています。

export const Modal = (props) => {
  const { isShow } = props;
  return (
    <>
      {isShow ? (
        <div className="modal__content">
          <img src="https://source.unsplash.com/random/" alt="" />
        </div>
      ) : null}
    </>
  );
};

いったんこれで、先程のモーダルの表示・非表示をボタンを押すことで制御ができるようになりました。

では、ここからカスタムフックにしていこうと思います。

下記が最終的なカスタムフック化したときのファイル構成になります。

▼カスタムフック
 components
　┗ modals
　　┗Modal.jsx
　┗ hooks
　　┗useModal.jsx
App.jsx

実はあまりやることはないのですが、App.jsxに記述しているモーダルを開く・閉じるの処理の部分をuseModal.jsxに書き写します。

import { useState } from "react";

export const useModal = () => {
  const [isShow, isSetShow] = useState(false);
  const toggle = () => {
    isSetShow(!isShow);
  };
  return { isShow, toggle };
};

そして、App.jsxでカスタムフックをインポートします。

import "./styles.css";
import { useModal } from "./hooks/useModal";
import { Modal } from "./components/modals/Modal";
export default function App() {
  const { isShow, toggle } = useModal();
  return (
    <div className="App">
      <h1>モーダルを開く</h1>
      <button onClick={toggle}>ボタン</button>
      <Modal isShow={isShow} />
    </div>
  );
}

これでカスタムフック化は完了になります。

const { isShow, toggle } = useModal();でuseModal()でreturnされてきているものを受け取って、ボタンとモーダル部分に渡しているのが分かると思います。

これで、App.jsxでは画面の表示だけを行うためのコンポーネントになり、ロジック部分をuseModal.jsxに閉じ込めることができました。

まとめ

JavaScriptやjQueryで実装されているサイトで同じような処理が複数あって困った経験があります。
Reactではカスタムフックを活用することで似たような処理を適切に切り出すことで、便利になるのかなと思いました。