Validating React Form Fields with State

The Problem: State updates are asynchronous

When validating controlled forms in React, a common mistake is expecting state updates (like setErrors) to happen immediately within the same function that validate the form fields. React state updates are asynchronous, so if you call setErrors inside your validation function, the updated errors state will not be immediately available to check in the submit handler.

Assume we have a controlled form for a user to subscribe to your app, which requires the user's name and email, as well as error state to check whether the form is completely filled:

function Form() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });

  const [errors, setErrors] = useState([]);

To handle error validation for the name and email fields, here is an example of a problematic pattern:

function handleErrors() {
  const tempErrors = [];

  if (formData.name === "") {
    tempErrors.push("Name is required.");
  }
  if (formData.email === "") {
    tempErrors.push("Email is required.");
  }

  setErrors(tempErrors); // This state update is asynchronous
}

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

  handleErrors();

  // Immediately checking `errors` state here is unreliable due to async update
  if (errors.length === 0) {
    // This will run even if errors were found
    console.log("no errors, submitting form");
    // proceed with submission...
  } else {
    console.log("errors found", errors);
  }
}

Because setErrors updates state asynchronously, the errors state inside handleSubmit will not reflect the latest errors immediately after calling handleErrors(). As a result, the form might submit even if validation fails.

The Solution: Return Errors and Control Flow Synchronously

Refactor your validation function to return the error list instead of setting state internally, then in handleSubmit decide whether to proceed or display errors.

function handleErrors() {
  const tempErrors = [];

  if (formData.name.trim() === "") {
    tempErrors.push("Name is required.");
  }
  if (formData.email.trim() === "") {
    tempErrors.push("Email is required.");
  }

  return tempErrors; // Return errors synchronously
}

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

  //reset stale errors from previous submit
  setErrors([])

  //get errors synchronously
  const tempErrors = handleErrors();

  if (tempErrors.length === 0) {
    console.log("no errors");
    fetch("http://localhost:3000/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData)
    })
    .then(r => r.json())
    .then(data => {
      console.log("Form submitted:", data);
      // Update UI or add new data to parent component state here...
    });
    // reset form data
    setFormData({
      name: "",
      email: ""
    });

  } else {
    console.log("errors found on submit", tempErrors);
    setErrors(tempErrors); // Update error state to display messages
  }
}

Summary

• Return Errors from handleErrors: This provides immediate access to validation results.
• Use Returned Errors in handleSubmit: You can synchronously decide whether to proceed or not.
• Set Errors State Only After Decision: This avoids race conditions caused by asynchronous state updates.
• This pattern ensures form validation and submission logic are reliable and user feedback occurs as expected.

Handling form validation in React requires understanding that state updates like setErrors are asynchronous and won’t reflect immediately. To avoid premature form submission despite validation errors, perform validation synchronously by returning errors from your validation function. Then, use these returned errors in your submit handler to decide whether to proceed or display error messages. This approach ensures reliable validation flow and a better user experience in React forms.