score:0

here is a simple class with a more recent, react 16 example (with comments inline for clarity):

class people extends component {
   state = {
      rows: [],
      loaded: false
   }
   /* lifecycle hook - keeping mind we are manipulating the dom */
   /* within the component so we need to know the component/dom is ready */
   componentdidmount(){
      let self = this;
      /* returns a fetch() call stored in context passed down */
      /* through a higher order component */
      this.props.context.getpeople() 
        .then(json => { self.setstate({rows:json.rows, loaded: true}); })
        /* notice that loaded is set to true in the state object */
   }

   loading = () => (
      <div classname={this.state.loaded?'ajax-loaded':'ajax-loading'}>loading</div>
      /* the class ajax-loaded -- you guessed it, hides the div */
      /* the thing to always keep in mind -- when state changes, things happen! */
   );
   render() {
       return (
           <div>
               {this.loading()}
               {this.state.rows.map(row => ( <div>{row.first} {row.last}</div>) )}
               {/* again, when state changes, things happen! */}
           </div>
       )
   }
}

score:10

rendering in react is synchronous, which means nothing else can run alongside it.

you could render your list progressively since the user's screen probably can't display more than a hundred items at a time.

also, note that rendering thousands of items is much slower in the development build than in the production build of react.

edit: another option would be to first render the loader, then render your list items on the next frame. the loader will be displayed until the list items have finished rendering.

react.createclass({
    getinitialstate: function() {
        return {
            loading: false,
            showall: false,
        };
    },

    _showall: function() {
        this.setstate({ showall: true, loading: true }, function() {
            // using settimeout here ensures that the component will wait until
            // the next frame before trying to render again.
            this.settimeout(function() {
                this.setstate({ loading: false });
            }.bind(this), 1000 / 60);
        });
    },

    render: function() {
        var amount = (this.state.showall && !this.state.loading) ? 100000 : 3;
        return (
            <div>
                <button onclick={this._showall}>
                    {this.state.loading ? 'loading...' : 'show all'}
                </button>
                {items.slice(0, amount).map(renderitem)}
            </div>
        );
    },
});

Related Query

More Query from same tag