Infinite Loop when maximum update depth exceeds

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:

[aje]

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

so it’s a bug in your code

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