【React】カスタムフックは積極的に使おう!2022/05/18に公開2022/05/20Next.jsReactTesthookカスタムフックtechこんにちは、@Yuki_TUです。useStateなどを直で描きがちではないでしょうか?私も最初の方はそうでした。今回、カスタムフックを使った事例を紹介できたらと思います。カスタムフックを使わない場合メールアドレスとパスワードでサインインする場合を考えます。この時、各入力値をステートとして、扱います。通常に考えると以下の感じで、メールアドレスと、パスワードそれぞれにuseStateでステート用意するという考えが、浮かぶのではないでしょうか?今回は少ないコード量なので、これでも大きな問題はないのですが、サインアップ画面などになると、コード量が増えるのは想像できますね。SignIn;カスタムフックを利用した場合では、カスタムフックを利用して書き換えてみましょう。SignIn;どうでしょう?SignUp.tsxがとてもスッキリしてみやすくなったのではないでしょうか。コード量も減るので、TTIのパフォーマンスも上がります。カスタムフックを利用することでテスト書きやすくなるメリットがあります。テスト書いてみましょう。今回は、JESTとtesting-libraryを利用します。expect(result.current[0]).toEqual('test');});こんな感じでテストコードも書けるので、堅牢なソースコードになります。注意カスタムフックにはいくつかルールがあります。カスタムフックもルールを違反してるかどうかを自動でチェックしてくれます。この命名規則を守らなかったらカスタムフックかどうか判別できなくなり、自動チェックもできなくなります。詳しくは以下の公式ページ参照ください。https://ja.reactjs.org/docs/hooks-custom.htmlまとめどうだったでしょうか?コード量も減り、ファイルも分割できて、可読性も上がる、パフォーマンスも上がるし、テストコードも書きやすいし、いいことしかありません。抽出する際は、一つのフックは一つの事柄のタスクをこなしているかを注意しましょう。1つのフックでたくさんのタスクを行なっていると逆にわかりにくくなるし、テストも多くなり複雑になります。engineer.バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。