Reactでhooksディレクトリ作るのやめません？

主題

Reactを使ったアプリケーション開発においてディレクトリ構造を検討する際に、hooksディレクトリの存在価値が分からなかったので、改めて考えた。

結論: Reactでhooksディレクトリ作るのやめません？

理由

以下、hooksディレクトリの作成が好ましくない理由。

• hooksというデイレクトリの命名は「あ、hooksならここになんでも入れていいんだ」という誤解を招く可能性があるのでやめて欲しい。関数ならなんでも入れていいhelpersフォルダの誕生なんかと一緒。
• そもそもReactを使ったアプリケーションにおいて、カスタムフックは頻発するものであり、わざわざsrc直下などにhooksディレクトリを置くより、コンポーネントファイルと同階層に配置した方がコロケーションの観点で良い。
• API通信系のhook、(例えばuseSwrを使って特定のエンドポイントに対して実装するようなhook)は、hooksフォルダを切るよりも、apiとかrpcとか、特定のグルーピングをした方が良い。特に実装を統一したい場合にはこれは有効なので、hook自体でまとめてディレクトリを切るのは良い。しかしhooksという命名は抽象度が高すぎる。

代替案

...じゃあ、どうすればいいの...？

./hooksではなく、責務に合わせてディレクトリの命名をすべき。

例えば、

• 通信系のhooksだけをまとめたいのであれば、./api-hooksだとか./rpc-hooksにすれば良い。もしくは./apiだとか./rpcだけでも良い。こうすれば、純粋にhttpリクエストを行う関数だけを切り出ししつつ、./api/todo/request.ts,./api/todo/useTodo.tsxなどとファイル分割すればいい。
• アプリケーション全体で共通で使いたいhookがあるのであれば、./appだとか./basisだ./commonとかそういうアプリケーションの基盤もしくは共通であることを示したフォルダ内に配置すれば良い。
• そもそもディレクトリを作成するんではなく、利用先のコンポーネントと同階層に配置する。

結論

• hooksディレクトリ作るのやめましょう。
• 代替案についてはチームで検討しましょう。

※注釈

以下のような注釈も一応あるため、用法容量には注意。一定のトレードオフの存在は確か。

• 小さくて個人でやっているようなアプリケーションなら、もちろん文句はない。
• ./hooksがあるディレクトリ構成は、一定数Reactの初学者にはとっつきやすいのは確か。しかし、アプリケーションが肥大化していくにつれて、対応しがたいディレクトリ構成ではあることに注意。