Create-react-app: Infinite Loop when maximum update depth exceeds

[anushreesubramani]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes.

Which terms did you search for in User Guide?

not present in guide

Environment

1. node -v: v6.11.0
2. npm -v: 4.6.1
3. yarn --version (if you use Yarn):
4. npm ls react-scripts (if you haven’t ejected): 1.0.14

Then, specify:

1. Operating system: Ubuntu
2. Browser and version (if relevant): chrome 59

Steps to Reproduce

Generate a CRA app using React 16 and use this snippet below:

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

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

    return <div />;
  }
}

Expected Behavior

When you have a react component with a nested update error, you get this error:

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

The error should print once to the console and the execution should stop.

Actual Behavior

But the execution did not stop. It was going in an infinite loop and printing 2 variants of the same error one after another. Initially assumed it to be a react issue(11136), but turns out:

This happens only in React 16 apps that are created using CRA.

Screenshot for your reference:

[lazyd3v]

I think it's not a bug in react/cra etc. https://github.com/facebook/react/pull/11113 have just not released yet. It's only in master branch, but not in last release (16.0.0) :)

[gaearon]

facebook/react#11113 is about deduplication of warnings, but this one is a hard error. If it keeps happening more than once, then it's a bug somewhere. (Likely in our error overlay.)

Note that this doesn't reproduce outside of CRA environment.

[Timer]

This doesn't repro on master, so I assume it was fixed in our iframe execution isolation.

[gaearon]

Verified it happens on stable but not on master, and that copy-pasting latest react-scripts into a project with this fixes the issue. Thanks for a great report though! Was very easy to verify.

[gaearon]

Should be fixed in [email protected].

https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.15

[AlexKutschera]

This happened for me in react-scripts 1.0.0 and 1.1.1 too

[pietmichal]

Had the same error when my routing configuration caused an infinite loop of redirects. It wasn't caused by setState pointed by CRA though.

[aje]

You shouldn't do setState in render() function, it causes loop.

so it's a bug in your code

[doughless]

You shouldn't do setState in render() function, it causes loop.

so it's a bug in your code

That was on purpose in the example. That was done to trigger the invalid infinite loop, and then another part of the code is supposed to detect this and halt execution. The actual bug was in the detection code; putting the intentional bug in the example was to purposely trigger the detection code.