Uncaught Invariant Violation : Maximum update depth exceeded

Question

This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I cannot route to the authenticationRoute destination because of this error.

Console Output:

index.js:1446 The above error occurred in the component:

in Redirect (at Auth.jsx:101)
in div (at Auth.jsx:116)
in Auth (created by Context.Consumer)
in Connect(Auth) (created by Route)
in Route (at App.js:27)
in Switch (at App.js:26)
in div (at App.js:46)
in App (created by Context.Consumer)
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App)) (at src/index.js:28)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:27)
in Provider (at src/index.js:26)

import React, { Component } from 'react';
import Input from '../../components/Input/input';
import Button from '../../components/Button/button';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import * as service from '../../services/AuthService';

 class Auth extends Component {
     state = {
        controls: {
            username: {
               //..
            },
            password: {
               //..
                },
                valid: false,
                touched: false
            }
        }
    }

    componentDidMount () {
        if ( this.props.isAuthenticated && this.props.authRedirectPath !== '/' ) {
            this.props.onSetAuthRedirectPath('/home');
        }
    }


    handleSubmit=(event)=> {
        event.preventDefault();
        this.props.auth(this.state.controls.username.value,this.state.controls.password.value)
       
    }
    render() {

        let errorMessage = null;
        let button= button=<Button btnType="Success">Login</Button>
        let authRedirect = null;
        if (this.props.isAuthenticated) {
            **authRedirect = <Redirect to={this.props.authRedirectPath}/>** //line 101
        }
        return (
        <div>
            {authRedirect}
                        <form onSubmit={this.handleSubmit}>
                           {form}
                        {button}
                        </form>
              
            </div>
        )
    }
}

export default connect( mapStateToProps, mapDispatchToProps )( Auth );

Answer 1

How are you checking for authentication ?

Its best you initialize isAuthenticated in the redux-store so you can use it globally in your components before its rendered

So, instead of

if (this.state.isAuthenticated) {routes=<div>..</div>}

Try

if (this.props.isAuthenticated{routes=<div>..</div>}

Instance Properties

props

this.props contains the props that were defined by the caller of this component. See Components and Props for an introduction to props.

state

this.state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

See State and Lifecycle for more information about the state. React.Component Lifecycle

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Also, ensure mapStateToProps is pointing to your reducer

return {isAuthenticated : state.{reducer}.isAuthenticated}