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

ryan-rushton · 2019-08-20T02:40:23Z

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

Create a new app using version 3.0.1 of create-react-app
Replace the code in App.js with the code listed below
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.

The text was updated successfully, but these errors were encountered:

omar-aguilar · 2019-08-20T16:43:14Z

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 · 2019-08-20T16:49:30Z

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 · 2019-08-20T21:20:58Z

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 · 2019-08-24T16:29:15Z

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 · 2020-04-12T16:59:00Z

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 · 2020-04-12T22:00:35Z

@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 · 2020-04-13T15:02:26Z

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 · 2020-05-17T21:10:26Z

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

bladerunner2020 · 2021-01-08T20:43:10Z

Encountered this issue while using an SVG image with many paths (in my case the 4631 paths are rendered ok, but when I add one more I got the dev tools error).

react_devtools_backend.js:5158 Uncaught RangeError: Maximum call stack size exceeded
    at shouldFilterFiber (react_devtools_backend.js:5158)
    at mountFiberRecursively (react_devtools_backend.js:5820)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)

I import the svg using: import { ReactComponent as Map } from './map.svg';

asumaran · 2021-01-14T05:07:50Z

I think the same issue is happening to me:

react_devtools_backend.js:5158 Uncaught RangeError: Maximum call stack size exceeded
    at shouldFilterFiber (react_devtools_backend.js:5158)
    at mountFiberRecursively (react_devtools_backend.js:5820)
    at mountFiberRecursively (react_devtools_backend.js:5871)
    at mountFiberRecursively (react_devtools_backend.js:5871)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)
    at mountFiberRecursively (react_devtools_backend.js:5880)

I'm rendering (among other things) about 10k very small react elements

function PlaceholderRow() {
  return (
    <tr className="candidate-row">
      <td colSpan="10"></td>
    </tr>
  );
}

React Developer Tools 4.10.1 (12/4/2020)

FSM1 · 2021-03-15T22:07:27Z

Also getting this error rendering 2 complex SVG's on the page. Any advice in resolving would be appreciated.

gaearon · 2021-03-15T23:30:10Z

To be clear, the error is coming from React DevTools. While it's unfortunate and would be nice to fix, you can always disable the extension if it's interfering with your work.

FSM1 · 2021-03-16T15:09:19Z

@gaearon absolutely understood. Got around this by rendering the SVG as an <img src={SVG}/> instead of a React component

jasekiw · 2024-04-15T21:53:03Z

To be clear, the error is coming from React DevTools. While it's unfortunate and would be nice to fix, you can always disable the extension if it's interfering with your work.

Hi @gaearon, I was able to reproduce this error when rendering a large datalist - 5000 options. I disabled the extension and am still seeing this error. It seems the error is happening during a hot reload but the exception is coming from react-dom_client.js. So it appears at least now this issue is no longer contained to just the dev tools.

I created a reproduceable demo below. let me know if it is reproduceable for you.

https://github.com/jasekiw/scheduleFibersWithFamiliesRecursivelyBug

bvaughn added Component: Developer Tools Type: Bug labels Aug 20, 2019

This was referenced Aug 20, 2019

DevTools: Too deep trees can cause a stack overflow #16491

Closed

Refactored backend to remove recursion bvaughn/react-devtools-experimental#385

Closed

bvaughn self-assigned this Aug 24, 2019

bvaughn mentioned this issue Aug 30, 2019

Refactored backend renderer to remove most of the recursion #16627

Closed

bvaughn mentioned this issue Sep 29, 2019

Error: "Maximum call stack size exceeded" #16950

Closed

bvaughn mentioned this issue Apr 28, 2021

DevTools should iterate over siblings during mount #21377

Merged

bvaughn closed this as completed Apr 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ryan-rushton commented Aug 20, 2019

omar-aguilar commented Aug 20, 2019

gaearon commented Aug 20, 2019

ryan-rushton commented Aug 20, 2019

bvaughn commented Aug 24, 2019

MVMS1994 commented Apr 12, 2020 •

edited

Loading

ryan-rushton commented Apr 12, 2020

bvaughn commented Apr 13, 2020

markbmullins commented May 17, 2020 •

edited

Loading

bladerunner2020 commented Jan 8, 2021 •

edited

Loading

asumaran commented Jan 14, 2021

FSM1 commented Mar 15, 2021

gaearon commented Mar 15, 2021

FSM1 commented Mar 16, 2021 •

edited

Loading

jasekiw commented Apr 15, 2024 •

edited

Loading

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

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

Comments

ryan-rushton commented Aug 20, 2019

Details

Steps to reproduce

App.js

Call Stack

omar-aguilar commented Aug 20, 2019

gaearon commented Aug 20, 2019

ryan-rushton commented Aug 20, 2019

bvaughn commented Aug 24, 2019

MVMS1994 commented Apr 12, 2020 • edited Loading

ryan-rushton commented Apr 12, 2020

bvaughn commented Apr 13, 2020

markbmullins commented May 17, 2020 • edited Loading

bladerunner2020 commented Jan 8, 2021 • edited Loading

asumaran commented Jan 14, 2021

FSM1 commented Mar 15, 2021

gaearon commented Mar 15, 2021

FSM1 commented Mar 16, 2021 • edited Loading

jasekiw commented Apr 15, 2024 • edited Loading

MVMS1994 commented Apr 12, 2020 •

edited

Loading

markbmullins commented May 17, 2020 •

edited

Loading

bladerunner2020 commented Jan 8, 2021 •

edited

Loading

FSM1 commented Mar 16, 2021 •

edited

Loading

jasekiw commented Apr 15, 2024 •

edited

Loading