title: How to count up by 1 and setState every 5 seconds in react
body: <p>I have a useState variable that I want to update every 5 seconds by an increment of 1, however I want it to stop counting and start at 0 again once it reaches the array's length. Here is what I have so far. Right now the console logs are confusing, it starts to work and then the numbers just start outputting every second or faster. This works when I dont run the SetShowNum in the increment function, but that's the functionaility I need.</p>
  <p>Any help would be greatly appreciated. Thanks</p>
  <pre><code>const [showNum, SetShowNum] = useState(0)
  
    useEffect(() =&gt; {
      var i = 0
  
      var interval = setInterval(increment, 5000)
  
      var stop = data.allSanityProducts.edges.length // right now equates to 4
  
      function increment() {
        i = i + 1
  
        if (i === stop) {
          i = 0
        }
  
        console.log(i)
        SetShowNum(i)
      }
    })
  </code></pre>