useSecounds という時計用 hooks を作った

useSecounds という react-hooks ライブラリ を作りました。

useSecounds の特徴

• 長時間使用しても .000 (コンマ 0 ミリ秒) のタイミングで更新する
• getSeconds() が 1 つ前の Date を渡さない

処理が早まって x.995 のタイミングで更新が発生しても (x + 1).000 のタイムスタンプを返します。

setInterval はずれていく

「setInterval は 登録時の timestamp から 補正しながら実行されるのか？ 🤔」と思い調べてみたのですがずれていく(drift する)みたいです。

参考:

検証してみても徐々にずれていきました。

hooks ライブラリの実装で意識したこと

返り値が配列にした

最初オブジェクトで実装していたのですが、

を読んで配列にしました。

命名できる利点が挙げられています。

useState を分けた

カスタムフックの中で 管理していた state が 3 つあったのですが useState 3 つに分けました。

公式ドキュメントに保守性が上がる理由を挙げられています。

create-react-hook

が使いやすかった。

• TypeScript サポート
• example ディレクトリがある
• test のサンプルがある

などが良かったです。