title: incrementation goes haywire when performed in `setState` callback
body: <p>I have a code in which <code>state</code> should be incremented by 1 every 2 seconds. <code>setState</code> is called inside <code>setInterval</code> callback, but instead of using a typical form of <code>setState</code>: <code>setState(newState)</code> I used a callback form <code>setState(() =&gt; {...})</code> and weird things started happening. Instead of incrementing by 1, the state is being incremented by 2.</p>
  <p>Here's the simplification of the offending code:</p>
  <pre><code>const handler = () =&gt; {
     let val = 0;
     setInterval(() =&gt; {
        setState(() =&gt; {
          console.log(&quot;before inc&quot;, { val });
          val = val + 1;
          console.log(&quot;after inc\n--------&quot;, { val });
          return val;
        });
      }, 2000);
  }
  </code></pre>
  <p>The expected logs would be:</p>
  <pre><code>before inc {val: 0}
  after inc {val: 1}
  -------- 
  before inc {val: 1}
  after inc {val: 2}
  -------- 
  
  </code></pre>
  <p>but instead I've got:</p>
  <pre><code>before inc{val: 0}
  after inc {val: 1}
  -------- 
  before inc {val: 2}
  after inc {val: 3}
  -------- 
  </code></pre>
  <p>which is super weird. What is happening?</p>
  <p>Playground: <a href="https://codesandbox.io/s/sparkling-shape-fshi8?file=/src/App.js" rel="nofollow noreferrer">codesandbox</a></p>