Reactで使用されるカスタムフックについて学んだものをまとめます。
カスタムフックとは?
React
では、多くのHooks(関数)
が提供されています。
さらに、開発者が独自でHooks
を作ることができます。そのHooks
のことをカスタムフックと呼んでいます。
![](https://okalog.info/wp-content/uploads/2020/11/thinking2.png)
わざわざカスタムフックを使う理由ってなに??
- コンポーネント部分には、画面の表示を任せ、カスタムフックにはロジックの部分の記述することで責務を分けることができるようになる。
- 責務を分けることで、可読性や保守性があがる。
- テストがしやすくなる。
また、カスタムフックを使用する際には、ルールがあるので気をつけておきましょう。
ということで、実際にカスタムフックを使ってみようと思います。
実装例
今回は、モーダルの実装をカスタムフックを使って行ってみます。実際に動くコードも最後に貼り付けておきます。カスタムフックを使わない例を記述した後に、カスタムフックにしていこうと思います。
![](https://okalog.info/wp-content/uploads/2021/08/raisetech-9_7.gif)
まずは、カスタムフックを使わないときの最終的なファイル構成は、以下の通りになります。
┗ 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ではカスタムフックを活用することで似たような処理を適切に切り出すことで、便利になるのかなと思いました。