<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">If a component's render method throws an error, it leaves React in an inconsistent state.<br>
Subsequent renders attempt to update the inconsistent component and result in errors like "Cannot read property 'getHostNode' of null".</p>
<p dir="auto"><strong>Proposed behavior</strong></p>
<p dir="auto">React could catch the error from the render method, set an "inconsistent state" flag and re-throw it.<br>
Afterwards, if React is about to update the previously rendered component, but this flag is set, it could discard or unmount the existing component and perform a fresh render, as if the container were empty.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue?</strong></p>
<p dir="auto">I've encountered the inconsistent state problems in 15.5 and 15.6</p>
<p dir="auto">So I'm trying to put some graceful error handling in case 1 of my views crap out:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var MyGoodView = React.createClass({
  render: function () {
    return &lt;p&gt;Cool&lt;/p&gt;;
  }
});

var MyBadView = React.createClass({
  render: function () {
    throw new Error('crap');
  }
});

try {
  React.render(&lt;MyBadView/&gt;, document.body);
} catch (e) {
  React.render(&lt;MyGoodView/&gt;, document.body);
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">MyGoodView</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Cool<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</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-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-v">MyBadView</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'crap'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">try</span> <span class="pl-kos">{</span>
  <span class="pl-v">React</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-v">MyBadView</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-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-v">React</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-v">MyGoodView</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-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">However, <code class="notranslate">MyGoodView</code> does not get rendered w/ the following stack trace:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fd284309818d836a1305ff759d73533cd3b2e9668c4a179d0e76c1b975190cc4/687474703a2f2f662e636c2e6c792f6974656d732f304733643373314734353270336731713054326a2f53637265656e25323053686f74253230323031342d31312d3034253230617425323031322e31312e3433253230414d2e706e67"><img src="https://camo.githubusercontent.com/fd284309818d836a1305ff759d73533cd3b2e9668c4a179d0e76c1b975190cc4/687474703a2f2f662e636c2e6c792f6974656d732f304733643373314734353270336731713054326a2f53637265656e25323053686f74253230323031342d31312d3034253230617425323031322e31312e3433253230414d2e706e67" alt="stack trace" data-canonical-src="http://f.cl.ly/items/0G3d3s1G452p3g1q0T2j/Screen%20Shot%202014-11-04%20at%2012.11.43%20AM.png" style="max-width: 100%;"></a></p>
<p dir="auto">Seems like error throw React in a bad state where <code class="notranslate">renderedComponent</code> is <code class="notranslate">undefined</code>, thus cannot be unmounted. How do I handle this scenario?</p>