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

Question

Whenever i am adding the if(IsLogged()){...} block I am getting this 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.

I've read other similar question here but I'm not able to understand whatI'm doing wrong.

I'm a newbie to React Js so please bear with me.

render() {
        if (IsLogged()) {
            return <Redirect to="/" />;
        }
        return (
            <Grid
                textAlign="center"
                style={{ height: "75vh" }}
                verticalAlign="middle"
            >
                <Grid.Column style={{ maxWidth: 450 }} columns={2}>
                    <Segment>
                        <Grid.Row>
                            <Header as="h1" color="teal" textAlign="center">
                                Log In
                            </Header>
                        </Grid.Row>
                        <Form
                            onSubmit={this.submitLogin}
                            style={{ paddingTop: "1rem" }}
                        >
                            <Form.Input
                                icon="mail"
                                iconPosition="left"
                                placeholder="Email"
                                fluid
                                value={this.state.email}
                                onChange={(e) =>
                                    this.setState({ email: e.target.value })
                                }
                            />

                            <Form.Input
                                icon="lock"
                                iconPosition="left"
                                fluid
                                placeholder="Password"
                                type="password"
                                value={this.state.password}
                                onChange={(e) =>
                                    this.setState({
                                        password: e.target.value,
                                    })
                                }
                            />

                            <Button color="teal" fluid size="large">
                                Log In
                            </Button>
                        </Form>
                        <Grid.Row style={{ paddingTop: "1rem" }}>
                            <div style={{ marginTop: "1rem" }}>
                                Not Singed In Yet?
                                <Link to="/signup">Sign Up</Link>
                            </div>
                        </Grid.Row>
                    </Segment>
                </Grid.Column>
            </Grid>
        );

function IsLogged() {
    let token = sessionStorage.getItem("jwtToken");

    if (!token || token === ""|| token === null || typeof token ==="undefined") {
        return false;
    } else {
        return true;
    }
}

export default IsLogged;

Answer 1

Try changing your onChange handlers to include e.preventDefault(); https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

onChange={(e) => {
  e.preventDefault();        
  // setState here
  }
}

Answer 2

This error also might happen when you are using setState() in render block, and then it causes infinite rerender. What is inside your isLogged() function? Most probably you should check is user logged with true/false variable, neither executing a function in render block, that might cause infinite loop

Answer 3

I am not sure what is your IsLogeed method? But try with...

if (!IsLogged()) {
        return <Redirect to="/" />;
    }