issue: formState is incorrect after submission - fix is an ugly hack

[harish-prakash]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/shy-tree-lsl6wt

Steps to reproduce

Scenario: Submit to the server errors out

Look at {isSubmitting, isSubmitted, isSubmitSuccessful} before and after the exection

Before

{isSubmitting: false, isSubmitted: false, isSubmitSuccessful: false}

After

{isSubmitting: false, isSubmitted: true, isSubmitSuccessful: true}

Side Note: This bug is a major cause of concern as seen in this related discussion: https://github.com/orgs/react-hook-form/discussions/10103#discussioncomment-5927542

Expected behaviour

The form state MUST reflect isSubmitSuccessful = false because the submission failed, either fix it or change the flag's name. The way things are right now is VERY MISLEADING!

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

If you look at the source code of how the isSubmitSuccessful form state is handled, you can see that it's derived from whether there were any errors set during the submit process.

This means that you can set a server (root) error using the setError form method when handling your submission exceptions to "tell" RHF what state your submission is in.

function Form() {
  const { handleSubmit, setError, formState } = useForm()

  const onSubmit = () => {
    try {
      throw new Error("internal server error")
    } catch (error) {
      setError("root.server", {
        type: "server",
        message: error.message,
      })
    }
  }

  const { isSubmitSuccessful } = formState // <== the isSubmitSuccessful state stays false on submit failure

  return <form onSubmit={handleSubmit(onSubmit, onInvalid)}>...</form>
}

[harish-prakash]

This anti-pattern forces me to do one of 2 things:

1. Keep the server call in the same component as the form definition OR
2. Create unnecessary async functions that poorly impact the event loop.

[Moshyfawn]

How's it an anti-pattern? Can you elaborate / demonstrate these points with an example?

• Why does it force you to keep the call next to the form definition?
• What async functions do you need to create?

[harish-prakash]

Imagine a simple implementation of a shared form

const mockCreateServerCall = async () =>
  await new Promise((_, reject) => setTimeout(() => reject('failed!'), 5000))

const mockEditServerCall = async () =>
  await new Promise((_, reject) => setTimeout(() => reject('failed!'), 5000))

export const CreateForm = () => {
  const createRecord = async () => await mockCreateServerCall()

  return <Form onSubmit={createRecord} />
}

export const EditForm = () => {
  const editRecord = async () => await mockEditServerCall()

  return <Form onSubmit={editRecord} />
}

interface FormValues {
  name: string
  value: string
}

interface FormProps {
  onSubmit: (data: FormValues) => Promise<unknown>
}

const Form = ({ onSubmit }: FormProps) => {
  const { handleSubmit, register } = useForm<FormValues>({
    defaultValues: {
      name: 'Name',
      value: 'Value'
    }
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextInput label="Name" {...register('name')} />
      <TextInput label="Value" {...register('value')} />
      <Button type="submit">Save</Button>
    </form>
  )
}

However, to properly set the form state according to the recommendation in this thread, I must either use an if... else... logic and call make the sever call directly from the <Form/> component or do this ugliness 👇

const Form = ({ onSubmit }: FormProps) => {
  const { handleSubmit, register, setError } = useForm<FormValues>({
    defaultValues: {
      name: 'Name',
      value: 'Value'
    }
  })

  const hackSubmitStateValidation = async (data: FormValues) => {
    try {
      await onSubmit(data)
    } catch (err) {
      setError('root.server', {
        type: 'server',
        message: err.message
      })
    }
  }

  return (
    <form onSubmit={handleSubmit(hackSubmitStateValidation)}>
      <TextInput label="Name" {...register('name')} />
      <TextInput label="Value" {...register('value')} />
      <Button type="submit">Save</Button>
    </form>
  )
}

Apologies for the strong word but adding another async to the event loop is troublesome.

[anonkey]

I've done an MR to at least have a consistent isSubmitting state without changing current behavior :
#11214

Because for now any error result in an infinite isSubmitting state, that's totally counter intuitive

[harish-prakash]

As @JeroenSchrader pointed out, this has been promoted as a fix 😭 <- tears of joy 🙌

[diego-bevilaqua86]

As other people have pointed out before, this is a breaking change from some versions ago - I used it in a previous project and got blindsided in a new one when my tests suddenly didn't work. So, is this gonna be reverted to the previous (and, in my opinion, more consistent) behaviour, or should we expect this to be the default behaviour from now on? Some months have gone by already, and from previous comments reverting this should be easy, in case that is the chosen route.

[JeroenSchrader]

This has been fixed in react-hook-form version 7.50.0

See v7.50.0 release notes, or specifically this PR

[harish-prakash]

😭 <- tears of joy