title: How to use setInterval in react?
body: <p>I'm trying to make a simple setInterval function for a typing game but it keeps glitching out depending on my syntax or not updating at all as it is now.  </p>
  
  <p>How do I get this to update every second and call the functions in the if statement?</p>
  
  <pre><code>const [counter, setCounter] = useState(10);
  
  useEffect(() =&gt; {
    let timer = setInterval(() =&gt; {
      setCounter(counter - 1);
  
      if (counter === 0) {
        setWordIndex(wordIndex + 1);
        setLives(lives - 1);
        life.play();
        setCounter(10);
      }
    }, 1000);
  }, []);
  </code></pre>
  
  <p>*********Edit***************</p>
  
  <p>This is what I have now that is working.  The first answer fixed the async issue of the counter not decrementing but I had to move the if statement outside of the useEffect to correct what I believe was caused by this same problem.</p>
  
  <pre><code> useEffect(() =&gt; {
      let timer = setInterval(() =&gt; {
        setCounter( counter =&gt; counter - 1);
      }, 1000);
    }, []);
    if (counter == 0) {
      setWordIndex(wordIndex + 1);
      setLives(lives - 1);
      life.play();
      setCounter(10);
    }
  </code></pre>