<h2 id="%E7%B5%90%E8%AB%96" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%90%E8%AB%96" aria-hidden="true"></a> 結論</h2>
<p data-line="1" class="code-line">関数はコンポーネントの再レンダリングのたびに、新しいインスタンスとして再生成されます。<br>
→ 参照が変わります。</p>
<p data-line="4" class="code-line">依存配列に含めた関数の参照が変わるたびにuseEffectが再実行されます。</p>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> サンプルコード</h2>
<p data-line="8" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__27ad583f79941" src="https://embed.zenn.studio/github#zenn-embedded__27ad583f79941" data-content="https%3A%2F%2Fgithub.com%2Fmutta0916%2Freact-lab%2Fblob%2Fmain%2Fapp%2FuseEffect%2Ffunction-deps%2Fpage.tsx" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/mutta0916/react-lab/blob/main/app/useEffect/function-deps/page.tsx" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mutta0916/react-lab/blob/main/app/useEffect/function-deps/page.tsx</a></p>
<ol data-line="10" class="code-line">
<li data-line="10" class="code-line">Count + 1 をクリック</li>
<li data-line="11" class="code-line">再レンダリング発生</li>
<li data-line="12" class="code-line">関数が再生成される</li>
<li data-line="13" class="code-line">参照が変わるため、useEffectが再実行される</li>
</ol>
<p data-line="15" class="code-line"><img src="https://static.zenn.studio/user-upload/039b62d0f396-20260221.gif" alt="useEffect-function-deps.gif" class="md-img" loading="lazy"></p>


useEffectの依存配列に関数を追加したときの挙動

結論

サンプルコード

Discussion