Why I'm getting these warnings while using useEffect hook in React.js?

Question

js and hooks, I have been getting these warnings and I just don't understand why, I did read React documentation but still I don't get it

./src/CustomerList.js Line 32:6: React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

./src/CustomerForm.js Line 44:9: React Hook useEffect has a missing dependency: 'setValue'. Either include it or remove the dependency array react-hooks/exhaustive-deps

I will just paste the hole code side in case the problem is not in the useEffect itself.

const CustomerForm = ({customer, saveSuccess}) => {
    const { register, handleSubmit, errors, setValue, reset } = useForm();

    const onSubmit = (data, e) => {
      e.preventDefault();
      if (customer) {
        data.id = customer.id;
        axios.put(BASE_URL, {
            id : data.id,
            firstName : data.firstName,
            lastName : data.lastName,
            phoneNumber:data.phoneNumber,
            email : data.email
        }).then(response => {
            alert("Se actualizó exitosamente.")
        })
    } else {
        axios.post(BASE_URL,  {
            firstName : data.firstName,
            lastName : data.lastName,
            phoneNumber:data.phoneNumber,
            email : data.email
        }).then(response => {
                alert("Se guardó exitosamente.")
            })
    }
    saveSuccess();
    };


    useEffect(() => {
        if (customer) {
            setValue("firstName", customer.firstName);
            setValue("lastName", customer.lastName);
            setValue("phoneNumber", customer.phoneNumber);
            setValue("email", customer.email);
        }
     },[customer]);


    return (
        <form onSubmit={handleSubmit(onSubmit)} noValidate>
          <Input
            name="firstName"
            inputRef={register({ required: true})}
            placeholder="First Name"
            error={!!errors.firstName}
            fullWidth
          />
           <p style={{color: "red"}}>{errors.firstName && "First Name is required"}</p>
           <Input
            name="lastName"
       //     setValue = {customerForm.lastName}
            inputRef={register({ required: true})}
            placeholder="Last Name"
            error={!!errors.lastName}
            fullWidth
          />
           <p style={{color: "red"}}>{errors.lastName && "Last Name is required"}</p>
           <Input
            name="phoneNumber"
         //   setValue = {customerForm.phoneNumber}
            inputRef={register({ required: true})}
            placeholder="Phone Number"
            error={!!errors.phoneNumber}
            fullWidth
          />
           <p style={{color: "red"}}>{errors.phoneNumber && "Phone Number is required"}</p>
           <Input
            name="email"
       //     setValue = {customerForm.email}
            inputRef={register({ required: true})}
            placeholder="Email"
            error={!!errors.email}
            fullWidth
          />
           <p style={{color: "red"}}>{errors.email && "Email is required"}</p>

        <Button
                variant="contained"
                color="default"
                onClick={() => { reset({}) }}
            >
                Reset
                  </Button>
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                Save
                  </Button>
      </form>
    );
}

Also one of those warnings says it's in the CustomerList.js but that component isn't mentioned in your example code, could you link it? — Emma
– Emma, Commented Feb 20, 2020 at 16:43

Emma · Accepted Answer · 2020-02-20 16:41:43Z

1

Are you able to link to a working example? That might help with debugging, but just by reading over your code it seems those warnings should resolve if you add those dependencies in your useEffect call. eg:

/* CustomerForm */

useEffect(() => {
  if (customer) {
    setValue("firstName", customer.firstName);
    setValue("lastName", customer.lastName);
    setValue("phoneNumber", customer.phoneNumber);
    setValue("email", customer.email);
  }
},[customer, loadData, setValue]);

answered Feb 20, 2020 at 16:41

Emma

83314 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Abid · Accepted Answer · 2020-02-20 16:48:04Z

You could add the missing dependency such as

useEffect(() => {
if (customer) {
        setValue("firstName", customer.firstName);
        setValue("lastName", customer.lastName);
        setValue("phoneNumber", customer.phoneNumber);
        setValue("email", customer.email);
    }
 },[customer,setValue,loadData]);

but in some cases adding a method as a dependency causes an infinite re-render so i think the best way to overcome the warning is to disable it by

    useEffect(() => {
if (customer) {
        setValue("firstName", customer.firstName);
        setValue("lastName", customer.lastName);
        setValue("phoneNumber", customer.phoneNumber);
        setValue("email", customer.email);
    }
 //eslint-disable-next-line
 },[customer]);

Collectives™ on Stack Overflow

Why I'm getting these warnings while using useEffect hook in React.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related