【React】timeout を管理する様々な custom hooks

ここ3ヶ月ぐらいはずっと Nextjs SSR x typescript なフロントエンド開発を行っていました。

hooksが導入されてからのReactは初めてでしたが、hooksはロジックを分離するのにとてもいい方法だと感じました。

Reactのデザインパターンは、コンポーネントをどれぐらいの粒度で細分化させるか（Atomic Designなど）や、ロジックとview部分をどう分けるかが議論のポイントだったように思っていたのですが、hooksの登場によりcomponentが直接hooksを参照する形でロジックを利用することができるようになったので、後者に関しては解決される部分が大きいのかなと思いました。

ロジックを小さい単位で切り出すことができていれば他のプロジェクトでもそのまま使うことができ、レシピ集的に使うことのできる点は嬉しいです。

useTimeout.ts

timeoutを管理するだけのロジックも、一度切り出してしまえばcomponent間で使い回すことができます。同一componentでも複数呼び出すことができます。

useKeepAliveTimer.ts

とあるhooksにさらに機能を持たせたい場合、そのhooksを拡張するのではなく、hooksを呼び出すhooksを作ることで機能拡張ができるのも良いなと思いました。

例えば「一定時間フラグを立たせておく」ロジックを実現したい場合は、前述のuseTimeout.tsを呼び出すhooksを作ることで実現できます。