title: React: setInterval Not working after one interval
body: <p><strong>My Goal:</strong></p>
  <p>I'm trying to build a component that when you give it <code>props.items</code> and <code>props.fadeEvery</code>, it will act as a text rotator. I eventually want it to fade in an out, but I'm having trouble with my <code>window.setInterval</code>.</p>
  <p><strong>Possible Issue:</strong></p>
  <p>I'm calling <code>setIndex</code> in the <code>useEffect</code> hook, but is that not good practice? How an I have it iterate through the array items infinitely?</p>
  <p><strong>TextFade.tsx</strong></p>
  <pre><code>// Imports: Dependencies
  import React, { useState, useEffect } from 'react';
  
  // TypeScript Type: Props
  interface Props {
    items: Array&lt;string&gt;,
    fadeEvery: number,
  };
  
  // Component: Text Fade
  const TextFade: React.FC&lt;Props&gt; = (props): JSX.Element =&gt; {
    // React Hooks: State
    const [ index, setIndex ] = useState&lt;number&gt;(0);
  
    // React Hooks: Lifecycle Methods
    useEffect(() =&gt; {
      const timeoutID: number = window.setInterval(() =&gt; {
        // End Of Array
        if (index &gt; props.items.length) {
          // Set Data
          setIndex(0);
        }
        else {
          // Set Data
          setIndex(index + 1);
        }
      }, props.fadeEvery * 1000);
  
      // Clear Timeout On Component Unmount
      return () =&gt; window.clearTimeout(timeoutID);
    }, []);
  
    return (
      &lt;div id=&quot;text-fade-container&quot;&gt;
        &lt;p id=&quot;text-fade-text&quot;&gt;{props.items[index]}&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  
  // Exports
  export default TextFade;
  </code></pre>