title: How to render items in a list one by one in react?
body: <p>I want to render video thumbnails one at a time so that I can improve the performance of my website.</p>
  
  <p>I have tried using a map but the map loops through all items at once and returns a list of components to render</p>
  
  <p>I have also tried using a while loop but the while loop only renders one thumbnail (<em>the first thumbnail</em>)</p>
  
  <p>here is my render method</p>
  
  <pre><code>render(){
          const { videos } = this.state;
          const listVideos = () =&gt; {
              let vids = videos
              let loopedAllVids = false;
              while(!loopedAllVids){
                  const head = R.head(vids); // returns first item
                  const { thumbnail } = head;
                  vids = R.tail(vids); // returns all items but first item
                  if(vids.length === 0){
                      loopedAllVids = true;
                  }
                  return(
                      &lt;div 
                        className='video' 
                        style={{background:`url(${thumbnail})`}}&gt;
                      &lt;/div&gt;
                  )
              }
          }
          return(
              &lt;div  className="row text-center"&gt;
                  &lt;div className="col-md-12 header"&gt;
                      &lt;h1&gt; My Youtube Videos &lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-12"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-8 col-xs-12 col-md-offset-2 videos"&gt;
                              {videos.length&gt; 0 &amp;&amp; listVideos()}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>