よく <code>useEffect</code> の中で <code>set〇〇</code> と state の更新することがあります。
state が更新されるので再レンダーされて、 また初回のuseEffectが呼ばれることで無限ループに入るのではないかと思っていましたが、誤解していたので忘備録として、<code>useEffect</code> 
の呼ばれるタイミングをまとめました。
詳細は公式ドキュメントの <a href="https://react.dev/learn/synchronizing-with-effects" title="Synchronizing with Effects">Synchronizing with Effects</a> 
に書いてあります。
<h2 id="useeffect-が呼ばれるタイミング">useEffect が呼ばれるタイミング<a aria-hidden="true" tabindex="-1" href="#useeffect-が呼ばれるタイミング"></a></h2>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">useEffect(() => {
 // This runs after every render
 // 依存配列を省略すると、毎回のレンダー後に呼ばれる
});

useEffect(() => {
 // This runs only on mount (when the component appears)
 // 依存配列を空配列にすると、マウント時のみ呼ばれる
}, []);

useEffect(() => {
 // This runs on mount *and also* if either a or b have changed since the last render
 // 依存配列に a と b を指定すると、a と b が変更されたときに呼ばれる
}, [a, b]);
</code></pre></div>
マウントと再レンダーを同じタイミングと捉えると、毎回 useEffect が呼ばれて、余計な処理が多くなってしまうと考えがちです。

Tag: react-hooks