title: Why I'm not able to clear my setInterval?
body: <p>I'm trying to create an <strong>automatic counter</strong> when the component(Home here for instance) renders in the view. The counter should start at 1 and stop at 10. But I'm not able to clear my setInterval at 10. The counter remains incrementing.
  What is the problem?</p>
  <p>Thanks a lot.</p>
  <pre><code>export const Home = () =&gt; {
  
      const [counter, setCounter] = useState(1)
      let timer = useRef()
  
  
      const animate = () =&gt; {
          if(counter === 10){
            clearInterval(timer.current)
          }else{
            setCounter((previous) =&gt; previous + 1) 
          }
      }
  
  
      useEffect(() =&gt; {
          timer.current = window.setInterval(() =&gt; {
              animate()
          }, 900)
      
       }, [])
  
  
  
    return (
        &lt;div style={{textAlign: &quot;center&quot;}}&gt;
           &lt;h1&gt;{counter}&lt;/h1&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>