title: How to work around a slowdown from looping through images in React?
body: <p>I'm currently looping through a list of images with the purpose of animating the movement of a light on a bar. Unfortunately I am not using CSS because it seems to me for my setup this looping would probably be the best way but it seems to eat a lot of resources so I am wondering if there is a way around this or if I simply have to change everything. Below is the code I am using:</p>
  
  <p>Help on the code came from here:</p>
  
  <p><a href="https://stackoverflow.com/questions/59117736/how-to-loop-over-images-array-and-render-them-in-a-component-for-react">How to loop over images array and render them in a component for React?</a></p>
  
  <p><a href="https://i.stack.imgur.com/lO2sc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lO2sc.png" alt="enter image description here"></a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>    state = {
      bars:[bar1,bar2,bar3,bar4,bar5],
      activeImageIndex: 0
   };
  
   componentDidMount(){
     setInterval(()=&gt;{
       let newActiveIndex = this.state.activeImageIndex===4 ? 0 : this.state.activeImageIndex+1     
       this.setState({
          activeImageIndex: newActiveIndex
       })
     }, 1000);
  
  
   }
  
   &lt;Image src={this.state.bars[activeImageIndex]} /&gt;
  </code></pre>
  
  <p>The code functions well for a bit then the app slows down as more resources seem to be taken. Checking the network tool I can see resources growing (files are named differently in my app):</p>
  
  <p><a href="https://i.stack.imgur.com/PXgeN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PXgeN.png" alt="enter image description here"></a></p>
  
  <p>Is there a better way to approach this? Or perhaps a way to free resources after each call? </p>