I am getting the following error while creating a signin page using react : Error: Maximum update depth exceeded

Question

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 am getting the above error but can't find any infinite loops in my code. please help with it

import React, { useState } from "react";
import Base from "../core/Base";
import { Redirect } from "react-router-dom";

import {
  signin,
  authenticate,
  isAuthenticated,
} from "../auth/helper/authapicalls";

const Signin = () => {
  const [values, setValues] = useState({
    email: "",
    password: "",
    error: "",
    loading: false,
    didRedirect: false,
  });

  const { email, password, error, loading, didRedirect } = values;
  var user = isAuthenticated();

  const handleChange = (name) => (event) => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: false, loading: true });
    signin({ email, password })
      .then((data) => {
        if (data.error) {
          setValues({ ...values, error: data.error, loading: false });
        } else {
          authenticate(data, () => {
            setValues({ ...values, didRedirect: true });
          });
        }
      })
      .catch(console.log("Signin request failed"));
  };

  const performRedirect = () => {
    if (didRedirect) {
      if (user) {
        return <Redirect to="/admin/dashboard" />;
      }
    }
  };
  const loadingMesage = () => {
    return (
      loading && (
        <div className="alert alert-warning">
          <h3>Loading...</h3>
        </div>
      )
    );
  };

  const errorMessage = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <div
            className="alert alert-danger"
            style={{ display: error ? "" : "none" }}
          >
            {error}
          </div>
        </div>
      </div>
    );
  };

  const signinForm = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <form>
            <div className="form-group">
              <label className="text-dark">Email</label>
              <input
                onChange={handleChange("email")}
                value={email}
                className="form-control"
                type="email"
              />
            </div>
            <div className="form-group">
              <label className="text-dark">Password</label>
              <input
                onChange={handleChange("password")}
                value={password}
                className="form-control"
                type="password"
              />
            </div>
            <button onClick={onSubmit} className="btn btn-datk btn-block">
              Sign In
            </button>
          </form>
        </div>
      </div>
    );
  };

  return (
    <Base>
      <div className="text-dark text-center mb-5 p-4">
        <h3>Sign in</h3>
      </div>
      {loadingMesage()}
      {errorMessage()}
      {signinForm()}
      {performRedirect()}
    </Base>
  );
};

export default Signin;

Answer 1

It's your handleChange event handler. You're calling it as soon as component renders. But you have to bind it. I did the same using arrow functions.

import React, { useState } from "react";
import Base from "../core/Base";
import { Redirect } from "react-router-dom";

import {
  signin,
  authenticate,
  isAuthenticated,
} from "../auth/helper/authapicalls";

const Signin = () => {
  const [values, setValues] = useState({
    email: "",
    password: "",
    error: "",
    loading: false,
    didRedirect: false,
  });

  const { email, password, error, loading, didRedirect } = values;
  var user = isAuthenticated();

  const handleChange = (name) => (event) => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: false, loading: true });
    signin({ email, password })
      .then((data) => {
        if (data.error) {
          setValues({ ...values, error: data.error, loading: false });
        } else {
          authenticate(data, () => {
            setValues({ ...values, didRedirect: true });
          });
        }
      })
      .catch(console.log("Signin request failed"));
  };

  const performRedirect = () => {
    if (didRedirect) {
      if (user) {
        return <Redirect to="/admin/dashboard" />;
      }
    }
  };
  const loadingMesage = () => {
    return (
      loading && (
        <div className="alert alert-warning">
          <h3>Loading...</h3>
        </div>
      )
    );
  };

  const errorMessage = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <div
            className="alert alert-danger"
            style={{ display: error ? "" : "none" }}
          >
            {error}
          </div>
        </div>
      </div>
    );
  };

  const signinForm = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <form>
            <div className="form-group">
              <label className="text-dark">Email</label>
              <input
                onChange={()=>handleChange("email")}
                value={email}
                className="form-control"
                type="email"
              />
            </div>
            <div className="form-group">
              <label className="text-dark">Password</label>
              <input
                onChange={()=>handleChange("password")}
                value={password}
                className="form-control"
                type="password"
              />
            </div>
            <button onClick={onSubmit} className="btn btn-datk btn-block">
              Sign In
            </button>
          </form>
        </div>
      </div>
    );
  };

  return (
    <Base>
      <div className="text-dark text-center mb-5 p-4">
        <h3>Sign in</h3>
      </div>
      {loadingMesage()}
      {errorMessage()}
      {signinForm()}
      {performRedirect()}
    </Base>
  );
};

export default Signin;