title: React extremely slow when iterating through JSON
body: <p>So, Im trying to fetch an JSON API with <em>fetch()</em> and iterate through it and render it in Reactjs. It does actually work pretty well with small json lists up to 100 items. But when I try the same thing with a json list of 900 items and upwards, it takes quite a while and the entire site isnt responsive anymore and gets pretty slow.</p>
  
  <p>So what am I doing wrong here and what can I fix to make the site faster?</p>
  
  <p>API.js</p>
  
  <pre><code>import _ from 'lodash/array';    
  const baseURL = 'https://url.com/api/v1';
  class API {
    static getLibrary(user, callback) {
      fetch(`${baseURL}/users/${user}/library`, {
        method: 'get',
        headers: { 'Content-type': 'application/json' },
      })
      .then((response) =&gt; {
        response.json().then((data) =&gt; {
          const titles = [];
          const status = [];
          const covers = [];
          const url = [];
          const rating = [];
          const episodesWatched = [];
          const episodesMax = [];
          for (const item in data) {
            titles.push(data[item].library.title);
            status.push(data[item].status);
            covers.push(data[item].library.cover_image);
            url.push(data[item].library.url);
            rating.push(data[item].rating);
            episodesWatched.push(data[item].episodes_watched);
            episodesMax.push(data[item].library.episode_count);
          }
          const library = _.zip(
            titles,
            covers,
            url,
            rating,
            episodesWatched,
            episodesMax
          );
          callback(library);
        });
      });
    }
  }
  export default API;
  </code></pre>
  
  <p>Index.jsx:</p>
  
  <pre><code>import React from 'react';
  import API from '../modules/api';
  import { Grid, Row, Col } from 'react-flexgrid';
  import Blazy from 'blazy';
  import _ from 'lodash/collection';
  
  class Library extends React.Component {
    constructor() {
      super();
      this.state = {
        library: undefined,
      };
    }
  
    componentDidMount() {
      API.getLibrary(this.props.params.user, (list) =&gt; {
        this.setState({
          library: _.sortBy(list, 0),
        });
      });
    }
    render() {
      var bLazy = new Blazy();
      if (this.state.library) {
        return (
          &lt;div className="content"&gt;
            &lt;Grid&gt;
              &lt;Row&gt;
              {this.state.library.map(function(entry, index) {
                return (
                  &lt;Col key={index} xs={6} md={2}&gt;
                    &lt;Card&gt;
                      &lt;CardTitle&gt;{entry[0]}&lt;/CardTitle&gt;
                    &lt;/Card&gt;
                  &lt;/Col&gt;
                  );
              })}
              &lt;/Row&gt;
            &lt;/Grid&gt;
          &lt;/div&gt;
        );
      }
      return (
        &lt;div&gt;
          Loading
        &lt;/div&gt;
      );
    }
  }
  
  export default Library;
  </code></pre>