<h3 dir="auto">Website or app</h3>
<p dir="auto"><a href="https://github.com/BlakeMack/quiz-app-react">https://github.com/BlakeMack/quiz-app-react</a></p>
<h3 dir="auto">Repro steps</h3>
<p dir="auto">-As soon as the &lt; App/&gt; component is rendered (as soon as the application is loaded) I get the Element 3 error above, which stays consistent throughout every state change in my application<br>
start<br>
quizdata<br>
score<br>
isScored<br>
But I am not getting any console errors and the app is working as expected, but I have no access to my react components or any visibility of the state changes occurring within the app</p>
<h3 dir="auto">How often does this bug happen?</h3>
<p dir="auto">Every time</p>
<h3 dir="auto">DevTools package (automated)</h3>
<p dir="auto">react-devtools-extensions</p>
<h3 dir="auto">DevTools version (automated)</h3>
<p dir="auto">4.27.0-bd2ad89a4</p>
<h3 dir="auto">Error message (automated)</h3>
<p dir="auto">Element "3" not found</p>
<h3 dir="auto">Error call stack (automated)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15"><pre lang="text" class="notranslate"><code class="notranslate">at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15
</code></pre></div>
<h3 dir="auto">Error component stack (automated)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40933:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39771:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42429:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35080:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37705:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44505:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39439:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44686:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44115:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31940:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32584:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39834:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56039:3)"><pre lang="text" class="notranslate"><code class="notranslate">at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40933:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39771:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42429:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35080:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37705:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44505:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39237:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39439:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39409:3)
    at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44686:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:44115:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:31940:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32584:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39834:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:56039:3)
</code></pre></div>
<h3 dir="auto">GitHub query string (automated)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="https://api.github.com/search/issues?q=Element  not found in:title is:issue is:open is:public label:&quot;Component: Developer Tools&quot; repo:facebook/react"><pre lang="text" class="notranslate"><code class="notranslate">https://api.github.com/search/issues?q=Element  not found in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react
</code></pre></div>
<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>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">React 16.3</p>
<p dir="auto">Just wanted to put an idea out here for feedback to see if this would be something useful. I've been using the new context API a bit and noticed myself repeating a pattern. A lot of my components look something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const MyContext = React.createContext('foo');

const MyComponent = ({ ownProp }) =&gt; (
  &lt;MyContext.Consumer&gt;
    { myProp =&gt; &lt;div&gt;{ myProp }{ ownProp }&lt;/div&gt;
  &lt;/MyContext.Consumer&gt;
);
export default MyComponent;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">MyContext</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-s">'foo'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">MyComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> ownProp <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-v">MyContext</span><span class="pl-kos">.</span><span class="pl-v">Consumer</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span> <span class="pl-s1">myProp</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span> <span class="pl-s1">myProp</span> <span class="pl-kos">}</span><span class="pl-kos">{</span> <span class="pl-s1">ownProp</span> <span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span>MyContext.Consumer&gt;
<span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">MyComponent</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This got me to wondering. What if the Consumer could be exposed as a HOC?</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const MyContext = React.createContext('foo');

const MyComponent = ({ myProp, ownProp }) =&gt; (
  &lt;div&gt;{ myProp }{ ownProp }&lt;/div&gt;
);
export default MyContext.isConsumedBy(MyComponent);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">MyContext</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createContext</span><span class="pl-kos">(</span><span class="pl-s">'foo'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">MyComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> myProp<span class="pl-kos">,</span> ownProp <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span> <span class="pl-s1">myProp</span> <span class="pl-kos">}</span><span class="pl-kos">{</span> <span class="pl-s1">ownProp</span> <span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">MyContext</span><span class="pl-kos">.</span><span class="pl-en">isConsumedBy</span><span class="pl-kos">(</span><span class="pl-v">MyComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This is similar to <code class="notranslate">connect</code> from redux or <code class="notranslate">withRouter</code> from react-router in which the context value(s) are being injected by a HOC. I can write my own HOC to do this using the existing Consumer component from the Context API - but thought I'd put this out here for possible inclusion in the API itself.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const isConsumedBy = Wrapped =&gt; props =&gt; (
  &lt;MyContext.Consumer&gt;
    { myProp =&gt; &lt;Wrapped myProp={myProp} {...props} /&gt; }
  &lt;/MyContext.Consumer&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">isConsumedBy</span> <span class="pl-c1">=</span> <span class="pl-v">Wrapped</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">MyContext</span><span class="pl-kos">.</span><span class="pl-v">Consumer</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span> <span class="pl-s1">myProp</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Wrapped</span> <span class="pl-c1">myProp</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">myProp</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-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">MyContext</span><span class="pl-kos">.</span><span class="pl-v">Consumer</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Thoughts?</p>