Issue 1:
Website or app

https://github.com/BlakeMack/quiz-app-react

Repro steps

-As soon as the < App/> 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

start

quizdata

score

isScored

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

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.27.0-bd2ad89a4

Error message (automated)

Element "3" not found

Error call stack (automated)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15

Error component stack (automated)

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)

GitHub query string (automated)

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

Issue 2:
Do you want to request a feature or report a bug?

feature

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.3

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:

const MyContext = React.createContext('foo');

const MyComponent = ({ ownProp }) => (
<MyContext.Consumer>
{ myProp => <div>{ myProp }{ ownProp }</div>
</MyContext.Consumer>
);
export default MyComponent;

This got me to wondering. What if the Consumer could be exposed as a HOC?

const MyContext = React.createContext('foo');

const MyComponent = ({ myProp, ownProp }) => (
<div>{ myProp }{ ownProp }</div>
);
export default MyContext.isConsumedBy(MyComponent);

This is similar to connect from redux or withRouter 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.

const isConsumedBy = Wrapped => props => (
<MyContext.Consumer>
{ myProp => <Wrapped myProp={myProp} {...props} /> }
</MyContext.Consumer>
);

Thoughts?