React Too many re-renders

Question

I am following the serverless-stack.com tutorial. But I am stuck after creating the login button.

I keep getting the error:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

I don't know what is causing the render so many times. I combined my LoaderButton instead of importing to make it simpler.

import React, { useState } from "react";
import { Auth } from "aws-amplify";
import { useHistory } from "react-router-dom";
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { useFormFields } from "../libs/hooksLib";
import { onError } from "../libs/errorLib";
import "../css/index.css";

const LoaderButton = (
  isLoading,
  className = "",
  disabled = false,
  ...props ) => {
    return(
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
    )
};

export default function Login() {
  let history = useHistory();
  const [isLoading, setIsLoading] = useState(false);
  const [fields, handleFieldChange] = useFormFields({
    email: "",
    password: ""
  });

  function validateForm() {
    return fields.email.length > 0 && fields.password.length > 0;
  }

  async function handleSubmit(event) {
    event.preventDefault();

    setIsLoading(true);

    try {
      await Auth.signIn(fields.email, fields.password);
      userHasAuthenticated(true);
      console.log(history);
      //history.push("/");
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  return (
    <div className="Login">
      <form onSubmit={ () => { handleSubmit() } }>
        <FormGroup controlId="email" bsSize="large">
          <ControlLabel>Email</ControlLabel>
          <FormControl
            autoFocus
            type="email"
            value={fields.email}
            onChange={ () => { handleFieldChange() } }
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="password"
            value={fields.password}
            onChange={ () => { handleFieldChange() } }
          />
        </FormGroup>
          <LoaderButton
            block
            type="submit"
            bsSize="large"
            isLoading={ () => { isLoading() } }
            disabled={() => { !validateForm() }}
          >
            Login
          </LoaderButton>
      </form>
    </div>
  );
}

hooksLib.js / useFormFields

import { useState } from 'react'

const useFormFields = (initalState) => {
  const [fields, setValues] = useState(initalState)

  return [
    fields,
    setValues({
      ...fields,
      [event.target.id]: event.target.value
    })
  ]
}

export { useFormFields }

Answer 1

Your custom hook should look like this if you want to accept the event value:

const useFormFields = (initalState) => {
  const [fields, setValues] = useState(initalState)

  return [
    fields,
    (event) => setValues({
      ...fields,
      [event.target.id]: event.target.value
    })
  ]
}

Since that parameter is actually a callback that should occur.

---

Also, your LoadingButton implementation needs to change to this:

<LoaderButton
  block
  type="submit"
  bsSize="large"
  isLoading={isLoading} // This is a boolean value, not a function
  disabled={() => !validateForm()}
>...</LoaderButton>