<p dir="auto"><a href="https://codesandbox.io/s/eager-morning-tbfjm?file=/src/App.js:341-342" rel="nofollow">CodeSandbox reproducing the problem with the latest experimental build</a></p>
<p dir="auto">This is an edge case with a DEV warning, so not really a priority, but it seems like the wrong behavior. If the length of the dependency array changes, React warns about it and the effect never fires. That seems reasonable.</p>
<p dir="auto">If there's a subsequent update where the dependency array <em>no longer changes length</em>, React still warns and the effect still doesn't fire.</p>
<h2 dir="auto">Steps to Reproduce</h2>
<ol dir="auto">
<li>Open the sandbox, check the console</li>
<li>Start incrementing the counter. You'll see the dependency array increases in length as the counter increases, triggering the warning. Note that the warning always references the initial empty array as the "Previous" value, even though that isn't accurate.</li>
<li>Once it hits <code class="notranslate">5</code> the array stops growing. In subsequent updates only the last item in the array changes.</li>
</ol>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">It's confusing that React still warns about the length change after it stops changing. It's also confusing that React doesn't fire the effect at all after it stops changing. It feels like React gets into a broken state and it should either recover or throw. Otherwise I can see an edge case where this warning gets ignored (or doesn't fire) in development and then effects stop firing in production.</p>
<p dir="auto">When we mouseenter into the dom in the demo, we can not see 'mouse enter' in console.<br>
React version:<br>
17.0.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>click the link and open the demo</li>
<li>mouse enter into blue space, and see logs in console.</li>
</ol>

<p dir="auto">Link to code example:<br>
<a href="https://codepen.io/qiuzhifeng97/pen/LYLKROg?editors=1111" rel="nofollow">https://codepen.io/qiuzhifeng97/pen/LYLKROg?editors=1111</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">Only 'mouse enter2', 'mouse over' nad 'mouse over2' in console.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">'mouse enter2', 'mouse over' , 'mouse enter' and 'mouse over2' in console.</p>