Getting maximum call stack exceeded on backend.js when rendering many elements.

[ryan-rushton]

Details

Using version 4.0.2 (8/15/2019) I am getting a maximum call stack size exceeded when my app starts up. While my app using this is a little different I have replicated the issue using a fresh create-react-app. I will include the App.js code below.

Steps to reproduce

1. Create a new app using version 3.0.1 of create-react-app
2. Replace the code in App.js with the code listed below
3. Inspect the console, there should be a stack trace from a maximum call stack exceeded error

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

const createDivs = num => {
    const rtn = [];
    for(let i = 0; i < num; i++) {
        const key = `div-${i}`;
        rtn.push(<div className={key} key={key} />)
    }
    return rtn;
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <div>
        {createDivs(15000)}
      </div>
    </div>
  );
}

export default App;

Call Stack

backend.js:formatted:2097 Uncaught RangeError: Maximum call stack size exceeded

    at ge (backend.js:formatted:2097)
    at Ge (backend.js:formatted:2435)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
    at Ge (backend.js:formatted:2478)
ge @ backend.js:formatted:2097
Ge @ backend.js:formatted:2435
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
Ge @ backend.js:formatted:2478
postMessage (async)
r @ contentScript.js:1
88 @ contentScript.js:1
n @ contentScript.js:1
(anonymous) @ contentScript.js:1
(anonymous) @ contentScript.js:1
Show 170 more frames

This was not an issue in the previous version of react-devtools.

[omar-aguilar]

Is kind of annoying having the backend.js loaded in your page and getting executed on top of all your code all the time.

  // the prototype stuff is in case document.createElement has been modified
  (function () {
    var script = document.constructor.prototype.createElement.call(document, 'script');
    script.src = "chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js";
    script.charset = "utf-8";
    document.documentElement.appendChild(script);
    script.parentNode.removeChild(script);
  })()

[gaearon]

Thanks for the report. This looks like a bug and we’ll investigate it shortly.

Is kind of annoying having the backend.js loaded in your page and getting executed on top of all your code all the time.

This is how DevTools always worked, we don’t really have other options.

I’m sorry it broke now, but it’s been a big rewrite, and things will take another week or two to fully stabilize. Sorry for the trouble.

[ryan-rushton]

Thanks @gaearon and @bvaughn, if it’s something you’d like a hand with I’d be happy to make a contribution. Just let me know if that’s the case.

[bvaughn]

I think this PR fixes the extreme deep and wide tree cases:
bvaughn/react-devtools-experimental#385

As a note, 15k divs is still not recommended 😄

[MVMS1994]

Is there any updates on this thread? I'm facing the exact problem. And in my case, it's 20K table rows.
I know it's a bad practice to have so many elements and pagination is recommended. But as a platform, I'd like to fix this before introducing pagination to my code.

Edit: I would like to lend a hand to close this issue. :)

[ryan-rushton]

@MVMS1994 it was fixed at one point but I haven't opened up the app I built which has a lot of divs in a while. Maybe this is a regression?

[bvaughn]

Is there any updates on this thread?

If there were an update, it would be on the the issue.

I did a little investigation into this (via #16627) but it turned out to be pretty complicated to get right in all of the methods, and it hasn't been a priority yet.

[markbmullins]

Just wanted to report the same issue using version 4.6.0.

 1 of 1 unhandled error

Unhandled Runtime Error
RangeError: Maximum call stack size exceeded

Call Stack
ye
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:16636)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21203)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21803)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21803)
He
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (6:21869)
He
...