<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">I would consider it a feature 😈</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">React does not put any limits on recursive rendering, using higher-order components. However it does so for calling <code class="notranslate">this.setState(...)</code></p>
<p dir="auto">It reproduces pretty easy with a pair of a Container and an HOC:<br>
<a href="https://github.com/sergeysolovev/react-bomb/blob/master/src/index.js">https://github.com/sergeysolovev/react-bomb/blob/master/src/index.js</a></p>
<p dir="auto">I wouldn't try this on CodeSandbox or JSFiddle (I did). Here is the code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;

// Accepts a component as a prop and renders it
// passing the props through. In a real life scenario
// usually does something more than that
const Container = props =&gt; {
  const { component: Component } = props;
  return &lt;Component {...props} /&gt;;
};

// An HOC-version of Container
const withContainer = WrappedComponent =&gt; props =&gt; (
  &lt;Container component={WrappedComponent} {...props} /&gt;
);

// Though it looks a bit artificially here,
// it's pretty common to use something like `compose`
// which does the same thing but looks more innocent
const Bomb = withContainer(withContainer(() =&gt; null));

class Detonator extends React.Component {
  state = {
    wentOff: false
  };
  goOff = () =&gt; this.setState({ wentOff: true });
  render = () =&gt;
    this.state.wentOff ? (
      &lt;React.Fragment&gt;
        &lt;Bomb /&gt; Oooppps... This text probably wont be rendered
      &lt;/React.Fragment&gt;
    ) : (
      &lt;button onClick={this.goOff}&gt;Lets see&lt;/button&gt;
    );
}

ReactDOM.render(&lt;Detonator /&gt;, document.getElementById(&quot;root&quot;));"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">ReactDOM</span> <span class="pl-k">from</span> <span class="pl-s">"react-dom"</span><span class="pl-kos">;</span>

<span class="pl-c">// Accepts a component as a prop and renders it</span>
<span class="pl-c">// passing the props through. In a real life scenario</span>
<span class="pl-c">// usually does something more than that</span>
<span class="pl-k">const</span> <span class="pl-v">Container</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-kos">{</span> <span class="pl-c1">component</span>: <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-v">Component</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-c">// An HOC-version of Container</span>
<span class="pl-k">const</span> <span class="pl-en">withContainer</span> <span class="pl-c1">=</span> <span class="pl-v">WrappedComponent</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-v">Container</span> <span class="pl-c1">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-v">WrappedComponent</span><span class="pl-kos">}</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Though it looks a bit artificially here,</span>
<span class="pl-c">// it's pretty common to use something like `compose`</span>
<span class="pl-c">// which does the same thing but looks more innocent</span>
<span class="pl-k">const</span> <span class="pl-v">Bomb</span> <span class="pl-c1">=</span> <span class="pl-en">withContainer</span><span class="pl-kos">(</span><span class="pl-en">withContainer</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">null</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Detonator</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">wentOff</span>: <span class="pl-c1">false</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-c1">goOff</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">wentOff</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-c1">render</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">wentOff</span> ? <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">Bomb</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span> Oooppps... This text probably wont be rendered
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span> : <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">goOff</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Lets see<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-v">ReactDOM</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">Detonator</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"root"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I would expect to have some limit on such kind of recursion, because it's blazing fast (like React's supposed to be), eating lots of RAM in short time and a bit difficult and annoying to stop.</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>
<p dir="auto">Reproduces on Chrome 65. I've done it for React 16.3.1 and 16.3.2</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>