<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Reporting a <strong>bug</strong>.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><em>Context: React Native app, but the error isn't related to the renderer</em></p>
<p dir="auto">I'm using a handcrafted <code class="notranslate">&lt;Fetch path="/api/route" render={this.renderChildren} /&gt;</code> component which fetches data and passes it to a ''function as child component", which is rendered. However when using <code class="notranslate">setState</code> to save the call result, I get a pretty interesting error as you can see:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8975443/31232986-b3805930-a9eb-11e7-80ce-63a15ba3d24c.png"><img width="418" alt="screenshot of the code leading to the error" src="https://user-images.githubusercontent.com/8975443/31232986-b3805930-a9eb-11e7-80ce-63a15ba3d24c.png" style="max-width: 100%;"></a></p>
<p dir="auto"><g-emoji class="g-emoji" alias="point_down" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f447.png">👇</g-emoji> gives you <g-emoji class="g-emoji" alias="point_down" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f447.png">👇</g-emoji></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/8975443/31233024-cafc2d6e-a9eb-11e7-8a3e-63cbc9516e3d.png"><img width="418" alt="screenshot of the error" src="https://user-images.githubusercontent.com/8975443/31233024-cafc2d6e-a9eb-11e7-8a3e-63cbc9516e3d.png" style="max-width: 100%;"></a></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 via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template for React 16: <a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>, template for React 15: <a href="https://jsfiddle.net/hmbg7e9w/" rel="nofollow">https://jsfiddle.net/hmbg7e9w/</a>).</strong></p>
<p dir="auto">I tried to remove all the business logic and reproduce the error from my React Native app. Here is a CodeSandbox which fully reproduce it: <a href="https://codesandbox.io/s/pmo6okkz1x" rel="nofollow">https://codesandbox.io/s/pmo6okkz1x</a>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I expected not to have this error.</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">From what I know: this error occurs on any React renderer (got it on React Native in the first place), and started the project with React 15.5.</p>
<p dir="auto"><strong>Related issues</strong><br>
Might be related to: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262744674" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11081" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11081/hovercard" href="https://github.com/facebook/react/issues/11081">#11081</a>, <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262833626" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11086" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11086/hovercard" href="https://github.com/facebook/react/issues/11086">#11086</a>.</p>
<hr>
<p dir="auto">Ping: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gaearon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaearon">@gaearon</a></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">When a error boundary receives error from its children and renders a custom error component, react reports "Rendered fewer hooks than expected" on the error component if we have some hooks after the <code class="notranslate">throw</code> statement</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"><a href="https://codesandbox.io/s/error-boundary-hooks-mismatch-tj52l" rel="nofollow">https://codesandbox.io/s/error-boundary-hooks-mismatch-tj52l</a></p>
<p dir="auto">After clicks "INC" button several times, the page will crash instead of rendering an error label:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:55:15)
    at renderWithHooks (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:13010:28)
    at mountIndeterminateComponent (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15020:13)
    at beginWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15625:16)
    at performUnitOfWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19312:12)
    at workLoop (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19352:24)
    at renderRoot (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19435:7)
    at performWorkOnRoot (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20342:7)
    at performWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20254:7)
    at performSyncWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20228:3)
    at interactiveUpdates$1 (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20495:7)
    at interactiveUpdates (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2170:10)
    at dispatchInteractiveEvent (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4882:3)
invariant @ react-dom.development.js:55
renderWithHooks @ react-dom.development.js:13010
mountIndeterminateComponent @ react-dom.development.js:15020
beginWork @ react-dom.development.js:15625
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
interactiveUpdates$1 @ react-dom.development.js:20495
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

The above error occurred in the &lt;ErrorLabel&gt; component:
    in ErrorLabel (created by _default)
    in div (created by _default)
    in _default"><pre class="notranslate"><code class="notranslate">Uncaught Invariant Violation: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:55:15)
    at renderWithHooks (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:13010:28)
    at mountIndeterminateComponent (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15020:13)
    at beginWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:15625:16)
    at performUnitOfWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19312:12)
    at workLoop (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19352:24)
    at renderRoot (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19435:7)
    at performWorkOnRoot (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20342:7)
    at performWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20254:7)
    at performSyncWork (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20228:3)
    at interactiveUpdates$1 (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:20495:7)
    at interactiveUpdates (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:2170:10)
    at dispatchInteractiveEvent (https://tj52l.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4882:3)
invariant @ react-dom.development.js:55
renderWithHooks @ react-dom.development.js:13010
mountIndeterminateComponent @ react-dom.development.js:15020
beginWork @ react-dom.development.js:15625
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
interactiveUpdates$1 @ react-dom.development.js:20495
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

The above error occurred in the &lt;ErrorLabel&gt; component:
    in ErrorLabel (created by _default)
    in div (created by _default)
    in _default
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Although there are some hooks after the <code class="notranslate">throw</code> statement in <code class="notranslate">App</code> component, it should not report hooks mismatch since the render of <code class="notranslate">App</code> is aborted and component type is switched from <code class="notranslate">App</code> to <code class="notranslate">ErrorLabel</code>.</p>
<p dir="auto">Second, it should not report error at <code class="notranslate">ErrorLabel</code> component, <code class="notranslate">ErrorLabel</code> is only a simple presentational component without any hooks.</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: 16.8.6</li>
<li>react-dom: 16.8.6</li>
</ul>