【React】「とりあえず切り出す」をやめる - カスタムフック設計で大事なこと

こんにちは! 株式会社Sally エンジニアの haruten です♪ 私たち株式会社Sallyでは、マーダーミステリーをスマホやPCで遊べるアプリ「ウズ」や、マーダーミステリーを制作してウズ上で公開・プレイできるエディターツール「ウズスタジオ」などを開発・運営しています。 今回はReactのカスタムフックの設計について学び直す機会があったので、その備忘録です！ はじめに カスタムフックは、Reactにおけるロジックの再利用を可能にする強力な機能です。 しかし最近、とりあえずスパゲッティコードを切り出して分割するだけに利用していることに気づき、改めてカスタムフックの最適な設計を意識しました。 この記事では、３つの重要な設計原則を軸に、実務で使えるカスタムフックのパターンを紹介します。良い例・悪い例を比較しながら、「なぜそうすべきか」を説明しています。 この記事で学べる３つの原則 単一責任

[bellonieta]

切り出したカスタムフックを一様に/src/hooksに置いていいのか、いつも悩む