<h3 dir="auto">Website or app</h3>
<p dir="auto"><a href="https://codesandbox.io/s/react-devtools-weird-bug-o3sib?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/react-devtools-weird-bug-o3sib?file=/src/App.js</a></p>
<h3 dir="auto">Repro steps</h3>
<p dir="auto">I stumbled across the weirdest bug with React DevTools and hooks that causes it to error out when inspecting a component. A minimal test case is documented in the Code Sandbox link, along with more details on the behavior and seemingly-arbitrary fixes. This does not affect the actual functionality of the app itself in any way, it behaves exactly as expected.</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.21.0-2f8f60ca8</p>
<h3 dir="auto">Error message (automated)</h3>
<p dir="auto">Cannot read properties of undefined (reading 'push')</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 J (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13006:7)
    at L (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13040:10)
    at exports.inspectHooksOfFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13101:12)
    at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7732:65)
    at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8004:38)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:9837:56
    at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4257:18)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10500:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11737:9)"><pre lang="text" class="notranslate"><code class="notranslate">at J (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13006:7)
    at L (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13040:10)
    at exports.inspectHooksOfFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:13101:12)
    at inspectElementRaw (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:7732:65)
    at Object.inspectElement (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:8004:38)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:9837:56
    at Bridge.emit (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:4257:18)
    at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:10500:12
    at listener (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js:11737:9)
</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:38726:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40146:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35254:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35695:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42085:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37256:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43423:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41711:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30116:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30727:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37635:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53004:3)"><pre lang="text" class="notranslate"><code class="notranslate">at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:38726:3)
    at Suspense
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at InspectedElementErrorBoundaryWrapper (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3)
    at NativeStyleContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40146:3)
    at div
    at div
    at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35254:3)
    at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35695:3)
    at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:42085:52)
    at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37092:5)
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37256:5)
    at div
    at div
    at div
    at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37222:3)
    at SchedulingProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:43423:3)
    at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:41711:3)
    at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30116:3)
    at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30727:3)
    at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37635:3)
    at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:53004: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=Cannot read properties of undefined (reading 'push') 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=Cannot read properties of undefined (reading 'push') in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react
</code></pre></div>
<p dir="auto">React version: 17.0.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>clone repo: <a href="https://github.com/avkonst/react-devtools-crash-demo">https://github.com/avkonst/react-devtools-crash-demo</a></li>
<li>yarn start</li>
<li>open the browser of the started app</li>
<li>open devtools</li>
<li>click Counter component in the components tab of the development tools</li>
<li>Watch it not loading anything and unhandled exception dumped to the console log</li>
</ol>

<p dir="auto">Link to code example: <a href="https://github.com/avkonst/react-devtools-crash-demo">https://github.com/avkonst/react-devtools-crash-demo</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">Devtools crash when I click on the following component in the development tools:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';

function useState() {
    React.useState(0);
    React.useEffect(() =&gt; () =&gt; {});
}

function Counter() {
	useState();
	React.useState(0);
	return &lt;div&gt;Open React Dev Tools Components panel,
		click on Counter component and
		observe the crash in the logging console.&lt;/div&gt;;
}

export default Counter;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">useEffect</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-kos">(</span><span class="pl-kos">)</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">function</span> <span class="pl-smi">Counter</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	<span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">useState</span><span class="pl-kos">(</span><span class="pl-c1">0</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">div</span><span class="pl-c1">&gt;</span>Open React Dev Tools Components panel,
		click on Counter component and
		observe the crash in the logging console.<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-smi">Counter</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">No crash and the development tools show hooks used.</p>