I'm new to Formik React Forms lib. I'm wondering why I need to wrap onSubmit code in a setTimeOut:

Example from web site ()

<Formik
    initialValues={{ name: 'jared' }}
    onSubmit={(values, actions) => {
        setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
        }, 1000);
    }}
>

I can't find any explanation in the docs. As far as I can read the function can be both sync and async...

I'm new to Formik React Forms lib. I'm wondering why I need to wrap onSubmit code in a setTimeOut:

Example from web site (https://jaredpalmer./formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-gt-void-promise)

<Formik
    initialValues={{ name: 'jared' }}
    onSubmit={(values, actions) => {
        setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        actions.setSubmitting(false);
        }, 1000);
    }}
>

I can't find any explanation in the docs. As far as I can read the function can be both sync and async...

https://jaredpalmer./formik/docs/api/formik#onsubmit-values-values-formikbag-formikbag-void-promise-any

• javascript
• reactjs
• forms
• formik

4 Answers 4

You don't need to put setTimeout() in onSubmit(). It's just an example in the documentation to probably simulate a mon use case of sending the form values as a HTTP request.

It disables the form button for certain amount of time, in your code it is 1 second.

Same data submitted twice may produce unwanted results, like double withdrawal from a bank account or storing two identical items in a shopping cart of an online store.

Also you will get the same data more than once so you will process this unwanted post requests then you have to deal with cleaning up this mess.

You can either disable the button or redirect the user to another page.

There is an async submission example that does a similar thing, this time using async/await

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

onSubmit={async (values) => {
  await sleep(500);
  alert(JSON.stringify(values, null, 2));
}}

where await sleep(500) is a placeholder for await someApiCall()

it's just to give you the feeling that the onSubmit send a query to the back and return the result in few seconds