javascript - How to progressively render react components? -

i'm working lists in range of 500 maybe 5000 items. each item in list show component, so:

list

render() {   return (     <div classname="itemlist">       <info items={this.props.items} />       <ul>         {this.props.items.map( item =>           <item item={item} key={item._id} refresh={this.props.refresh} />         )}       </ul>     </div>   ); } 

item

render() {   var item = this.props.item;    return (     <li onclick={() => this.setstate({showinfo: !this.state.showinfo})}                   classname="item">       <h3 classname={this.state.showinfo ? "item-title-bar active" : "item-title-bar"}>         <div>           <div classname="item-category">             {item.category}            </div>           <div classname="item-name">             {item.name}           </div>         </div>       </h3>        {this.state.showinfo &&         <iteminfo item={this.props.item} refresh={this.props.refresh} />       }     </li>   ); } 

once 1 of these lists gets around 1000 items, it's noticeably slow when click show different list. perf tools showing me 90-150 ms displaying list @ 1000 or 2000 items. not sure can around long i'm rendering them.

so, i'm trying do:

1. can let initial items update, render others in background, while app remains responsive?

2. how can show initial items, load more user scrolls down page?

if neither option works, i'll try load few, add show more or show button @ bottom of list. want make seamless possible though, open other suggestions well.

react-virtualized first choice when dealing virtual list. lot of examples here: https://bvaughn.github.io/react-virtualized/#/components/list

pretty simple if know heights of items ahead of time, can use cellmeasurer component if don't.