title: How to 'useState' correctly in Formik 'onSubmit' function?
body: <p>I'm using Formik in my Next.js app, and i ran into a problem that I'm not sure how to fix. My submit <code>Button</code> is a component that accepts a <code>showSpinner</code> prop. If it is true -&gt; button is disabled and a  loading spinner in a button is displayed. <code>showSpinner</code> value depends on <code>loading</code> that is coming from <code>useState</code> hook. Here is a relevant code:</p>
  <pre><code> export default function register() {
    const [loading, setLoading] = useState(false)
    return (
    &lt;&gt;
    &lt;Layout&gt;
      &lt;div className={styles.registerContainer}&gt;
        &lt;div className={styles.registerFormContainer}&gt;
  
          &lt;h1 className={styles.registerHeader}&gt;Sign Up&lt;/h1&gt;
          &lt;Formik
            initialValues={{
              email: '',
              password: '',
              passwordConfirm: '',
              acceptedTerms: false
            }}
            onSubmit={
              (values, { setSubmitting }) =&gt; {
                console.log(loading)
                // here loading == false as expected
  
                setLoading(true)
                console.log(loading)
                // here loading == false even though i set it to true 
  
                initFirebase()
                firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
                  .then((res) =&gt; {
                    console.log('done!')
                  })
                  .catch(function (error) {
                    // Handle Errors here.
                    console.log(error)
                  })
                  .finally(() =&gt; {
  
                    console.log(loading)
                    //here loading == false too, even though I expected it to be true
  
                    setSubmitting(false)
                    setLoading(false)
                  })
              }
  
            }
          &gt;
            &lt;Form&gt;
              &lt;FormikText label=&quot;Email:&quot;
                name=&quot;email&quot;
                type=&quot;email&quot;
                id=&quot;email&quot; /&gt;
              &lt;FormikPassword label=&quot;Password:&quot;
                name=&quot;password&quot;
                id=&quot;password&quot;
              /&gt;
              &lt;FormikPassword label=&quot;Confirm Password:&quot;
                name=&quot;passwordConfirm&quot;
                id=&quot;passwordCOnfirm&quot;
              /&gt;
              &lt;FormikCheckbox
                name=&quot;acceptedTerms&quot;
                id=&quot;acceptedTerms&quot;
              &gt;
                &lt;span className={styles.checkboxLabel}&gt;
                  I agree to the &lt;Link href=&quot;/terms&quot; &gt;&lt;a className={styles.registerLink}&gt;Terms of Service&lt;/a&gt;&lt;/Link&gt;  and  &lt;Link href=&quot;/privacy&quot;&gt;&lt;a className={styles.registerLink}&gt;Privacy/Cookie Policy&lt;/a&gt;&lt;/Link&gt;
                &lt;/span&gt;
              &lt;/FormikCheckbox&gt;
              &lt;div className={styles.buttonContainer}&gt;
                &lt;Button type=&quot;submit&quot; color=&quot;blue&quot; showSpinner={loading}&gt;Sign Up&lt;/Button&gt;
              &lt;/div&gt;
            &lt;/Form&gt;
          &lt;/Formik&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Layout&gt;
  &lt;/&gt;
    )
  }
  </code></pre>
  <p>Even though my <code>Button</code> is  somehow working as expected (spinner is displayed as intended), after <code>console.loging</code> value of <code>loading</code> through  <code>onSubmit</code> function call I noticed that it is <code>false</code>  were I expected it to be true. Is it  due to the way React batches <code>useState</code> calls?
  My questions are:</p>
  <ol>
  <li>How to handle this scenario in a right way?</li>
  <li>If <code>loading == false</code> in those <code>console.logs</code>, why is my <code>Button</code> working  as intended ?</li>
  </ol>