タブが非アクティブになったときのタイマー遅延とHelmet

タイマーが遅延する理由とその解決

視覚的に経過時間が見やすいタイマーアプリを作りました。
TypeScriptをつかったReactを書いてみようと挑戦したものです。
こちらからどうぞ

ただこのアプリ問題がありまして、タブが非アクティブになるとタイマーをが遅延するというものでした。

原因はブラウザの機能で非アクティブなときに積極的な動作を避けるような設定があるそうでした。

この問題については既にいくつか記事があるし（参考）、ChatGPT先生に聞いてsetIntervalを使って解決してくれました。

タブのタイトルの更新頻度が微妙

確かに遅延自体はなくなったのですが、タイトルに表記されているタイマーにはまだ遅延が見られました。遅延というより更新頻度が2秒に一回に限られました。

原因を探すと、どうもHelmetが怪しかっです。
HelmetとはReactで作られたアプリのHeadを制御するためのコンポーネントです。

解決

調べてみると、HelmetではReactの仮想DOMが再レンダリングされない限り、実際のtitle要素を更新しないようでした。

なのでHelmetを使わず、直接タイトルを変更するようにしたら毎秒表示されるようになりました！

document.title = `${pageName} | ${APP_NAME}`;

やったね