Uncaught Error: Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops.

2022年6月15日

react-dom.development.js:4379 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.

This error is caused by an infinite loop when setState is called during rendering in React.

The contents of this error are as follows

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.

To fix this error, we need to change the code that is causing the infinite loop.

In this article, I will show you how to solve this error and what causes it.

The solution is to not call setState.

You can prevent infinite loops by not executing functions containing setState in event handlers such as the click event.

Don’t put parentheses in the function by writing onClick={this.handleOpen} as shown in line 16.

You can eliminate the infinite loop by defining it as an arrow function in the event handler by writing onClick={() => this.handleOpen(false)} as shown in line 20.

class OpenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
    this.handleOpen = this.handleOpen.bind(this);
  }

  handleOpen(is_open=true) {
    this.setState({ open: is_open);
  }

  render() {
      return (
          <div>
            <button onClick={this.handleOpen}>
                OPEN
            </button>
            <button onClick={() => this.handleOpen(false)}>
                CLOSE
            </button>
          <div>
      )
  }
}

The reason is that calling setState will cause it to be re-rendered.

The reason for the infinite loop is that the function containing the setState defined for the click event, etc. fires when rendering.

The setState will re-render when called.

Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen.
https://reactjs.org/docs/state-and-lifecycle.html

The specific cycles that lead to infinite cycles are as follows

Execute render() → execute this.handleOpen() → execute setState() → execute render() again → repeat

In the following code, this.handleState() defined for the click event fires every time the component is rendered.

class OpenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
    this.handleOpen = this.handleOpen.bind(this);
  }

  handleOpen(is_open=true) {
    this.setState({ open: is_open);
  }

  render() {
      return (
          <div>
            <button onClick={this.handleOpen()}> // setStateを呼び出すので無限ループ
                OPEN
            </button>
            <button onClick={this.handleOpen(false)}> // setStateを呼び出すので無限ループ
                CLOSE
            </button>
          <div>
      )
  }
}

conclusion

Check if you are using setState in render, or if there are any functions that call setState.

If you are calling setState, change it as follows.

Pass the function name (no parentheses in the function name)
Use the Arrow function

The setState will no longer be called when rendering React, and the infinite loop error will be resolved.

class OpenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
    this.handleOpen = this.handleOpen.bind(this);
  }

  handleOpen(is_open=true) {
    this.setState({ open: is_open);
  }

  render() {
      return (
          <div>
            // <button onClick={this.handleOpen()}> // setStateを呼び出すので無限ループ
            <button onClick={this.handleOpen}> // 関数名を渡す（関数名にカッコを付けない）
              OPEN
            </button>
            
            // <button onClick={this.handleOpen(false)}> // setStateを呼び出すので無限ループ
            <button onClick={() => this.handleOpen(false)}> // アロー関数を使用する
              CLOSE
            </button>
          <div>
      )
  }
}

Here is a good reference on how to pass functions to componentry.

https://reactjs.org/docs/faq-functions.html