Reactで０.1秒毎に再レンダー し続けることはブラウザがかわいそうですか？

Question

現在、ボタンを押したら時間を計測して、
経過した時間によって処理を実行するウェブサービスをリアクトで作っています。

 const [time, setTime] = useState(0);

 function getTime(event) {
    timer = setInterval(function () {
      var time = event.target.getCurrentTime();
      var time = Math.floor(time * 100) / 100;
      setTime(time)
    }, 100);


 return(
  <div>
    <button onClick={getTime} />
　　{console.log("render!")}
  </div>
 )

この時点で、console.logにrender!がめちゃくちゃ表示され続けていることに気づき、ブラウザがかわいそうだなぁと思っています。（頑張って処理しているのかなあと心配。）

今後、
経過した時間を取得するために、
意図した時間に処理を開始するために、
常にtimeの時間をチェックしていなければいけないと思っています。

こういった処理、つまり、毎秒でも、０.１秒毎にでも、処理をするかどうかのチェックをするのは御法度だったりするのでしょうか？
それとも心配のしすぎで、そのぐらいの処理はPCにとってはなんともないことなのでしょうか？

Answer 1

それとも心配のしすぎで、そのぐらいの処理はPCにとってはなんともないことなのでしょうか？

そうですね、一般的なブラウザは1秒間に最大60フレームを描画します。0.1秒となればその6倍です。

（ただし、getTimeのキャッシュを行っていないなど、調整すべき点はあるかと思います）

Comments

[Yusuke_m25]

なるほど！ありがとうございます！
一点だけ、「getTimeのキャッシュを行っていないなど、調整すべき点」があるとのことですが、詳しくお伺いできますか？
「JS　キャッシュをしない処理」とかで調べてみたのですが、ピンとこず...
キーワードだけでもご教示いただけますと幸いです！

[maisumakun]

Reactの関数コンポーネント特有の話です。「React useCallback」などで調べてみてください。

[Yusuke_m25]

ありがとうございます！精進いたします！