title: Updating state from Formik onSubmit handler causing useEffect to fire twice
body: <p>In this code, Formik onSubmit calls a function and the function updates two pieces of state. These two pieces are both parameters on a useEffect and it causes the useEffect to log &quot;updated&quot; twice.</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import { Formik, Form } from &quot;formik&quot;;
  
  export default function App() {
    const [foo, setFoo] = useState(1);
    const [bar, setBar] = useState(&quot;a&quot;);
  
    useEffect(() =&gt; {
      console.log(&quot;updated&quot;);
    }, [foo, bar]);
  
    const handleSubmit = () =&gt; {
      setFoo(2);
      setBar(&quot;b&quot;);
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Formik initialValues={{ test: &quot;123&quot; }} onSubmit={handleSubmit}&gt;
          &lt;Form&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        &lt;/Formik&gt;
        {foo}
        {bar}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Testable version:
  <a href="https://codesandbox.io/s/async-dew-eri87?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/async-dew-eri87?file=/src/App.js</a></p>
  <p>This is the same piece of code but uses a regular form instead of Formik. This time on submit &quot;updated&quot; is only being called once:</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  
  export default function App() {
    const [foo, setFoo] = useState(1);
    const [bar, setBar] = useState(&quot;a&quot;);
  
    useEffect(() =&gt; {
      console.log(&quot;updated&quot;);
    }, [foo, bar]);
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      setFoo(2);
      setBar(&quot;b&quot;);
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        {foo}
        {bar}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Testable version:
  <a href="https://codesandbox.io/s/gracious-fermat-wk0ul?file=/src/App.js:0-491" rel="nofollow noreferrer">https://codesandbox.io/s/gracious-fermat-wk0ul?file=/src/App.js:0-491</a></p>
  <p>Why is the Formik version making the useEffect run twice and is there a way to make it only run once?</p>