title: to many re-renders error react, how to avoid it
body: <p>hope you can help with this issue:</p>
  <p>I have been struggling to try to find the way how to clear interval in react, I am having an error everytime I run the code saying that there are many re-renders, I have been trying for so long in google how to clear interval function in react but I just couldn't find a working way for me, I would like to call the clear interval if the condition</p>
  <pre><code>if(verification.length===6){
        setSpinner()
          console.log('works')
    }
  </code></pre>
  <p>I hope it will be enough for react to accept my dirty code.</p>
  <p>here is the rest of the code:</p>
  <pre><code>import &quot;./PaymentPage.scss&quot;;
  import Spinner from &quot;../../components/Spinner/Spinner&quot;;
  
  export default function PaymentPage() {
      const [status, setStatus] = useState(false);
      const [alert, setAlert] = useState(true);
      const [spinner, setSpinner] = useState(true);
      const [verification, setVerification] = useState(&quot;&quot;);
      
    
    if(verification.length===6){
     
        setSpinner()
          console.log('works')
    }
      
  
  const verifier=(e)=&gt;{
      e.preventDefault();
      
     
      if(number.length&gt;=16 &amp;&amp; name!=='' &amp;&amp; expiry!=='' &amp;&amp; cvc.length&gt;=3){
          setStatus(true)
          console.log('alert',status)
          setInterval(print,500);**//if the condition above is accomplished i call the interval.**
         
      }else{
          setAlert(false)
          console.log('alert',alert)
      }
  
  }
  const print=()=&gt;{
  
      setVerification(verification=&gt; verification+&quot;.&quot;);**//it will add a '.' on every iteration**
  
  }
  
  
  useEffect(() =&gt; {
       
      console.log('cc details', number,name,expiry,cvc,expiry)
     
  
  }, [status])
  
  
  
  </code></pre>
  <p>thank you all in advance and sorry for my probably stupid question</p>