title: React hooks: new state value not reflecting in setInterval callback
body: <p>I have a function react component that has a counter that starts from 10000 and goes to 0.</p>
  
  <p>I am setting a setInterval callback using useEffect hook during component mounting. The callback then updates the counter state.</p>
  
  <p>But I don't know why, the <code>count</code> value never decreases. Each time the callback runs <code>count</code> is 10000.</p>
  
  <p>(I am using react &amp; react-dom version <code>16.8.3</code>)</p>
  
  <p>Function component is as below:</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from 'react'
  
  const Counter = () =&gt; {
    const timerID = useRef()
    let [count, setCount] = useState(10000)
  
    useEffect(() =&gt; {
      timerID.current = setInterval(() =&gt; {
        //count here is always 10000
        if (count - 1 &lt; 0) {
          setCount(0)
        } else {
          setCount(count - 1)
        }
      }, 1)
    }, [])
  
    return &lt;h1 className="counter"&gt;{count}&lt;/h1&gt;
  }
  
  export default Counter
  </code></pre>
  
  <p>Here is the link to codesandbox: <a href="https://codesandbox.io/embed/l79pq1zoq7" rel="nofollow noreferrer">link</a></p>