What is the difference betwee submitForm, handleSubmit, onSubmit in formik?

Question

Formik doc says

https://jaredpalmer.com/formik/docs/guides/form-submission

To submit a form in Formik, you need to somehow fire off the provided handleSubmit(e) or submitForm prop. When you call either of these methods, Formik will execute the following (pseudo code) each time:

----
Run all field-level validations, validate, and validationSchema asynchronously and deeply merge results
---

I cannot understand the form submission process. What is the difference between handleSubmit, onSubmit, submitForm.

Does validations always run asynchronously even if I provide a synchronous validate function?

Which of the above three function run asynchronously? What do they return?

Answer 1

onSubmit - it's native event prop of form component. It's do not have relation to your question

---

I haven't use Formik. But if we take a look on their code: https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/packages/formik/src/Formik.tsx#L740

submitForm - more low level function, that return Promise, and you could work with result afterwards. handleSubmit - inside invoke submitForm, and handle all error if occurs inside, return nothing. (https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/packages/formik/src/Formik.tsx#L833)

Both of this function is async, because they wrapped with useEventCallback.

By default validation always will come after you trigger any of the events submitForm or handleSubmit. What type of validation sync or async you could write by yourself depend on this first validate example (https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/docs/guides/validation.md#validate)

There is list of methods when validation is run, or how you could trigger it: https://github.com/jaredpalmer/formik/blob/26c4f8627a5ecfd81ec2196c7a9687b3f39f2836/docs/guides/validation.md#validate