title: why I can't stop interval in react functional component
body: <p>In my code I have some problems with intervals. I have situation like this</p>
  <pre><code>import { useState } from 'react';
  
  function App() {
    const [count, setCount] = useState(0);
  
    function handleClick() {
      const timer = setInterval(() =&gt; {
        if (count &gt;= 10) {
          clearInterval(timer);
        } else {
          setCount((prevCount) =&gt; prevCount + 1);
        }
      }, 1000);
    }
  
    return (
      &lt;&gt;
        &lt;button onClick={handleClick}&gt;start&lt;/button&gt;
        &lt;p&gt;{count}&lt;/p&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>what am trying to do is to start an interval when user click a button and stop it when counter reaches 10, but it never stops and debugger says that inside <code>setInterval</code> count is always 0. Does anybody know what is the problem?  I also found that if I rewrite component to <code>class</code> component like this</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0,
      };
    }
  
    handleClick() {
      let myInterval = setInterval(() =&gt; {
        if (this.state.count &gt;= 10) {
          clearInterval(myInterval);
        } else {
          this.setState((prevState) =&gt; ({
            count: prevState.count + 1,
          }));
        }
      }, 1000);
    }
  
    render() {
      return (
        &lt;&gt;
          &lt;button onClick={this.handleClick.bind(this)}&gt;start&lt;/button&gt;
          &lt;p&gt;{this.state.count}&lt;/p&gt;
        &lt;/&gt;
      );
    }
  }
  
  </code></pre>
  <p>it works perfectly.<br />
  I don't know what's happening and I spend almost day trying to figure out.<br />
  So does anybody know why <code>class</code> component works and why <code>functional</code> component doesn't?</p>
  <p>Thanks in advance</p>