The object empty check is not working and changing the logic

So I am doing a form validation check and I have taken ‘formErrors’ and set the errors in this object. However it is initially {} and in my code I am checking for Object.keys(formErrors).length===0 which returns true for even {}

  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };

  const url = '/collectdetails';

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormErrors(validate(formValues));
    // setIsSubmit(true);
    console.log(noErrors);
    if (noErrors) {
      const { fullName, phoneNumber, emailAddress, role, lookingFor, company } =
        formValues;
      const data = {
        Name: fullName,
        MobileNumber: phoneNumber,
        Email: emailAddress,
        Role: role,
        LookingFor: lookingFor,
        CompanyName: company,
      };

      getDetails(url, data).then((user) => {
        const { Response } = user;

        if (Response === 'OK') {
          setCurrentUser(phoneNumber);
          navigate('/');
        }
      });
    }
  };

  useEffect(() => {
    if (Object.keys(formErrors).length === 0) {
      console.log(formErrors);
      setNoErrors(true);
    }
  }, [formErrors]);

  

So When I submit the handleSubmit() method is run and it has 2 nested checks. The first one is for noErrors which is a bool state that checks if my object is empty. I have console logged it and it returns true when the component loads as the object is {} in the beginning. Is there any way for me to put a check so that I can see if there are some keys present in the object?

Answer

useEffect will run every time your formErrors object changes. This includes the first render.

It would probably be better for you to put your useEffect logic inside your submit handler. The formErrors state object just seems to function as a temporary store for you as you immediately call setNoErrors(true) if it is populated:

const [formValues, setFormValues] = useState(initialValues);

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormValues({ ...formValues, [name]: value });
};

const url = '/collectdetails';

const handleSubmit = (e) => {
    e.preventDefault();
    // just store in a normal variable
    const errors = validate(formValues);

    // setIsSubmit(true);
    console.log(noErrors); // this isn't defined in your code

    // just check the errors object for keys
    if (Object.keys(errors).length === 0) {
      // errors object is empty
      console.log(errors);
      setNoErrors(true);
      const { fullName, phoneNumber, emailAddress, role, lookingFor, company }
        = formValues;
      const data = {
        Name: fullName,
        MobileNumber: phoneNumber,
        Email: emailAddress,
        Role: role,
        LookingFor: lookingFor,
        CompanyName: company,
      };

      getDetails(url, data).then((user) => {
      const { Response } = user;

      if (Response === 'OK') {
        setCurrentUser(phoneNumber);
        navigate('/');
      }
    });
  }
};