<p dir="auto">Hi<br>
when I write this code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default function Bug(props) {
    return (
        &lt;Bug&gt;&lt;/Bug&gt;
    )
}"><pre class="notranslate"><code class="notranslate">export default function Bug(props) {
    return (
        &lt;Bug&gt;&lt;/Bug&gt;
    )
}
</code></pre></div>
<p dir="auto">it will cause crashes and my browser never responses on the page and the page progress indicator turns forever without any error or something else. and the whole page freezes:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/84472404/142823377-37d7d97b-8c41-46d0-b3ab-1ac75c8fb248.png"><img src="https://user-images.githubusercontent.com/84472404/142823377-37d7d97b-8c41-46d0-b3ab-1ac75c8fb248.png" alt="Screenshot from 2021-11-22 11-21-35" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/84472404/142823368-19339644-2f2f-4781-8eaf-63620004488c.png"><img src="https://user-images.githubusercontent.com/84472404/142823368-19339644-2f2f-4781-8eaf-63620004488c.png" alt="Screenshot from 2021-11-22 11-22-30" style="max-width: 100%;"></a></p>
<p dir="auto">I report it because I know React provides infinite loops, but here it crashes unexpectedly.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<ul dir="auto">
<li>Feature (possibly bug?)</li>
</ul>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I've been trying out the new Context API in my project and it's awesome. However, in my haste to start using it, I managed to stumble into a situation where every time I would try and render a certain component which was making use of a few different contexts, the app would completely freeze, and the only thing that would let me get out of this error state was to forcefully kill the process via the chrome task manager.</p>
<p dir="auto">Nothing would be logged to the console, the app would just completely freeze, and when I opened up the task manager and saw the CPU spiked up every time i would go to this component, and the only way I could stop it was to crash the tab.</p>
<p dir="auto">I finally threw some <code class="notranslate">console</code> statements in and saw that it had just entered into an infinite loop between these providers. I managed to get the app to stop crashing, but I'm still unsure as to why exactly this was happening. I'm sure I was just using this API incorrectly somehow, but this was a very confusing problem to diagnose, and some error checking here would be incredibly useful</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It would be very beneficial to have some sort of checks in place, similar to what happens with too many <code class="notranslate">setState</code> calls happening too closely when you call it from <code class="notranslate">componentDidUpdate</code>, for example. That way, instead of freezing everything up permanently, the app could at least crash and report some sort of information and help me realize where I'd gone wrong.</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>
<ul dir="auto">
<li>React <code class="notranslate">16.3.0</code></li>
<li>Chrome <code class="notranslate">65.0.3325.181</code></li>
</ul>