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

Created on 20 Aug 2019  路  8Comments  路  Source: facebook/react

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.

Developer Tools Bug
Source
picture ryan-rushton
👍5

Most helpful comment

Thanks for the report. This looks like a bug and we鈥檒l 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鈥檛 really have other options.

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

picture gaearon on 20 Aug 2019
👍2

All 8 comments

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);
  })()
omar-aguilar picture omar-aguilar on 20 Aug 2019

Thanks for the report. This looks like a bug and we鈥檒l 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鈥檛 really have other options.

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

gaearon picture gaearon on 20 Aug 2019
👍2

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

ryan-rushton picture ryan-rushton on 20 Aug 2019

I think this PR fixes the extreme deep and wide tree cases:
https://github.com/bvaughn/react-devtools-experimental/pull/385

As a note, 15k divs is still not recommended 馃槃

bvaughn picture bvaughn on 24 Aug 2019
😄1

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. :)

MVMS1994 picture MVMS1994 on 12 Apr 2020

@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?

ryan-rushton picture ryan-rushton on 13 Apr 2020

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.

bvaughn picture bvaughn on 13 Apr 2020

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
...
markbmullins picture markbmullins on 17 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jmullo picture jmullo  路  3Comments
DimitarChristoff picture DimitarChristoff  路  3Comments
framerate picture framerate  路  3Comments
zpao picture zpao  路  3Comments
hnordt picture hnordt  路  3Comments