Infinite Loop when maximum update depth exceeds #11136

imanushree · 2017-10-06T14:25:00Z

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
I wrote this component to recreate the warnings from #11081 and to fix it:

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

  render() {
    this.setState({
      value: 'test',
    });

    return <div />;
  }
}

And in the process found that this error came up:

'Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly
calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of
nested updates to prevent infinite loops.'

But the execution did not stop. It was going in an infinite loop and printing 2 variants of the same error one after another.

Screenshot for your reference:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).
Snippet given above

What is the expected behavior?
There shouldn't be an infinite loop. The execution should stop after printing the error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16, Chrome 59, Ubuntu. I tested it in older versions of react and this problem is not present there.

aweary · 2017-10-06T15:29:58Z

Hey, @anushreesubramani! Thanks for the report. I ran the snippet you provided and it seems like it's stopping after the maximum update depth error: https://jsfiddle.net/xonsuqwz/

Can you verify if that JSFiddle is working as expected for you? If so, how does it differ from the code you're running to get the infinite loop?

gaearon · 2017-10-06T15:39:52Z

JSFiddle might work differently. It's worth checking locally.

aweary · 2017-10-06T15:48:00Z

@gaearon I tested locally with the HTML file below and saw the same results in Chrome for both the production and development builds

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="container"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
  <script>
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          value: null,
        };
      }

      render() {
        this.setState({
          value: 'test',
        });

        return React.createElement('div', null);
      }
    }

    ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('container')
    ); 
  </script>
</body>
</html>

gaearon · 2017-10-06T16:53:00Z

This could also be specific to CRA environment.

imanushree · 2017-10-07T06:23:30Z

@aweary @gaearon The fiddle works fine for me as well. I also tested the html and its fine as well. But its happening in the CRA generated app. So, I guess Dan's guess is right. It could be specific to CRA. Should I open an issue in CRA instead?

gaearon · 2017-10-07T09:14:11Z

Yes please. Although let's keep this one open too for posterity.

imanushree · 2017-10-07T10:34:12Z

i have opened an issue in CRA for the same. https://github.com/facebookincubator/create-react-app/issues/3251

gaearon · 2017-11-03T15:24:36Z

Was fixed inside CRA.

tessact · 2018-03-11T10:02:05Z

I am still getting this error.

krishna2nd · 2018-03-11T15:24:35Z

I am still getting the error with React 16.2.0. setState does not called in "componentWillUpdate" or "componentDidUpdate". nestedUpdateCount incremented to 1001.
Error since NESTED_UPDATE_LIMIT set to 1000 and nestedUpdateCount never reset to 0 after the error throws.
I am not using CRA.

bengotow · 2018-11-05T18:57:22Z

Hey folks—just to chime in, I'm still experiencing this in React 16.2 in production. It seems that in the JSFiddle above, the App component is unmounted once the invariant violation occurs. In my app, the component is not unmounted, and anything that calls setState on any component in the UI (for example, an event handler or timer) triggers another "Maximum call depth" error.

I've verified this by creating a component like the JSFiddle one that triggers a "Maximum call depth" exception exactly once and then stops. Any subsequent setState triggers another one.

I can certainly unmount / remount the React root (or maybe I need an error boundary and don't have one), but I think it'd be super great if the error description identified this could happen. I spent a long time looking at those downstream setState calls triggering a "Maximum call depth" error and trying to figure out how on earth they were looping 1000+ times :-)

gaearon · 2018-11-05T19:06:48Z

If you think there's a React bug here please file a new issue with a reproducing example. Thanks.

bengotow · 2018-11-05T19:33:28Z

@gaearon thanks—I created a Fiddle to file an issue (https://jsfiddle.net/ts8zbh4u/) but it looks like the problem I was encountering has been fixed already in React 16.6. 🎉

In 16.2, the "Maximum call depth" error triggered via a setState loop in componentDidUpdate in the Fiddle does not reach the parent componentDidCatch, but in 16.6 it does. Will just upgrade my project! 🙏

imanushree mentioned this issue Oct 6, 2017

Deduplication of warning messages in nested updates (#11081) #11113

Merged

gaearon added Component: Core Utilities Type: Needs Investigation labels Oct 10, 2017

gaearon closed this as completed Nov 3, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Infinite Loop when maximum update depth exceeds #11136

Infinite Loop when maximum update depth exceeds #11136

imanushree commented Oct 6, 2017

aweary commented Oct 6, 2017

gaearon commented Oct 6, 2017

aweary commented Oct 6, 2017

gaearon commented Oct 6, 2017

imanushree commented Oct 7, 2017

gaearon commented Oct 7, 2017

imanushree commented Oct 7, 2017

gaearon commented Nov 3, 2017

tessact commented Mar 11, 2018

krishna2nd commented Mar 11, 2018 •

edited

Loading

bengotow commented Nov 5, 2018

gaearon commented Nov 5, 2018

bengotow commented Nov 5, 2018

Infinite Loop when maximum update depth exceeds #11136

Infinite Loop when maximum update depth exceeds #11136

Comments

imanushree commented Oct 6, 2017

aweary commented Oct 6, 2017

gaearon commented Oct 6, 2017

aweary commented Oct 6, 2017

gaearon commented Oct 6, 2017

imanushree commented Oct 7, 2017

gaearon commented Oct 7, 2017

imanushree commented Oct 7, 2017

gaearon commented Nov 3, 2017

tessact commented Mar 11, 2018

krishna2nd commented Mar 11, 2018 • edited Loading

bengotow commented Nov 5, 2018

gaearon commented Nov 5, 2018

bengotow commented Nov 5, 2018

krishna2nd commented Mar 11, 2018 •

edited

Loading