setStateと再レンダリングの挙動について

Question

以下のようなソースでsetCount(count+1)のようにしてレンダリング回数を見ていました。

countが増加しないのはわかるのですが、以下の画像のように、'rendered timer'の回数が１回多いように思います。

import { useEffect, useState } from 'react';
 
export const Timer = () => {
  const [count, setCount] = useState(0);
  console.log('rendered timer');
  const time = () => {
    console.log('time');
    console.log('count:', count);
    setCount(count + 1);
  };
 
  useEffect(() => {
    console.log('use effect');
    const interval = setInterval(time, 5000);
    console.log('use effect2');
 
    return () => {
      clearInterval(interval);
      console.log('clear');
    };
  }, []);
 
  return <div>{count}</div>;
};

１回目：初回マウント時

２回目：setIntervalでtime関数内でsetCountが実行されたとき(countの増加によるstate変更）

3回目：state変更は無いのに再度レンダリングされている。原因不明

この３回目の'redered timer'のレンダリングはなぜ起こっているのでしょうか？

Answer 1

この３回目の'redered timer'のレンダリングはなぜ起こっているのでしょうか？

気にすべきではありません。

関数コンポーネントは冪等であるべきものであるので、「実行回数が想定より多い」で正しく動かないのであれば、そのコーディングのほうが間違いです。

（なお、useEffectは1度のレンダリングに対して1回実行されることが保証されていますが、関数コンポーネントの関数そのものは、1度のレンダリングで複数回実行される可能性もあります）