Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops.-CodePudding

I want count varible to count how many norms voilated in my app. so i have declared variable normsCount: 0 in state. in function checking norms like below and increment count.

const {
normsCount
        } = this.state

if (isViolationPass_Out_HMR) {
            this.setState({
                normsCount: normsCount   1
            })
        }

but getting this error

ExceptionsManager.js:180 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 located at:
    in NavigationContainer (at App.js:412)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

any help thanks in advance.

CodePudding user response：

If you set a state in your render-function the state will be changed which causes a re-render. That is causing the infinite loop.

You need to make sure that the increase is only triggered on the change once.

CodePudding user response：

You are calling setState inside the function which is getting called inside the render function, which is calling setState continuously causing infinite loop. To stop this, you will have to do setState on any event like onclick. Check for the setState which is getting called inside the render function and do that setState on an event.