<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1549069/80130965-bb377900-85ae-11ea-9ccf-0050af4f5d81.gif"><img src="https://user-images.githubusercontent.com/1549069/80130965-bb377900-85ae-11ea-9ccf-0050af4f5d81.gif" alt="y" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">React version: 16.13.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">1- The first render is correct<br>
2- The second re-render is correct because <code class="notranslate">X</code> changes from <code class="notranslate">1</code> to <code class="notranslate">2</code><br>
3- The third re-render in the wrong</p>
<p dir="auto">Link to code example:<br>
<a href="https://codesandbox.io/s/bug-in-render-ldycb" rel="nofollow">https://codesandbox.io/s/bug-in-render-ldycb</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The third re-render is unnecessary but happen</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The third re-render should not happen</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">As demonstrated in <a href="https://codesandbox.io/s/1r539z96r3" rel="nofollow">this</a> codesandbox, trying to implement a pattern similar to the one discussed in <a href="https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops" rel="nofollow">https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops</a> results in an infinite loop, even if the value of the state does not change. This seems like a bug, because, as documented <a href="https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update" rel="nofollow">here</a>, <code class="notranslate">If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Since the state does not change, bail out on the re-render.<br>
This can be worked around by adding a check before <code class="notranslate">setState</code> to check if the state has changed before calling the function.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>