Imagine a common situation: you have a table with a lot of data, or a list with many items. If you already had this situation in react, you know there is a waiting period for the component to actually render on the screen, and then it renders all at once.

class ParentComponent extends React.Component {

render() {

return <div>

...

{this.props.items.map( item =>

<ChildComponent {...item}/>

)}

</div>

}

}

Once the ParentComponent receives the props.items, it first adds it all to the virtual DOM, then it checks to see which part of real DOM needs reconciliation, and then updates it all at once. The delay you see is the amount of time react needs to process a lot of items before it even gets to reconciliation.

What we want is to be able to show the items already loaded in virtual DOM, while we wait for others to load. To get this done, we need to render our ParentComponent as soon as possible ( make it visible on the screen ), and then add items in steps. Let’s extend our ParentComponent:

constructor(props) {

super(props); this.state = {

items: this.props.items.slice(0, 1)

}

}

...

render() {

return <div>

...

{this.state.items.map( item =>

<ChildComponent {...item}/>

)}

</div>

}

We added a constructor, and in it defined state.items, which is what actually gets mapped over in the render() method we just updated. We make sure that state.items is an array with only one element to start with. Now we need a way to update state.items and add other items, one by one. By using this approach, the render method will fire more often ( props.items.length times ) but it will immediately show all loaded items, which is what we want.

recursive = () => {

setTimeout(() => {

let hasMore = this.state.items.length + 1 < this.props.items.length;

this.setState( (prev, props) => ({

items: props.items.slice(0, prev.items.length + 1)

}));

if (hasMore) this.recursive();

}, 0);

}

EDIT: In case you’re worried about calling setState in a recursive function, i.e. calling it too many times, note:

calling setState is the proper way to update the view you can load more than one item at a time, depending on what you need. So if you have a grid with rows of 4 items, you can load 4 at a time. setState can batch together several calls, making it more efficient. setTimeout puts the execution at the end of the stack, so if a user interacts with an already rendered component, his interaction will have priority over rendering the rest of the items. This improves UX, because the user can start working without having to wait for everything to show up. do performance tests to see if it slows down or speeds up your app this is useful if you already have all of the items in the fronted. If you’re fetching, you need to use a different strategy There will be no side effects if you extract components. The component that does this shouldn’t do anything else in it’s state. I made this into a HOC.

This is a recursive function that will keep calling itself until the lengths are the same. Each iteration will add one element to the state.items array. We added setTimeout to put it at the end of the stack, so that we only update the state after the rendering is done, thus providing a better user experience. We just need to call this function:

componentDidMount() {

this.recursive();

}

And voila!

EDIT: there is also a possibility to slice the props in the render method, and just update a state.counter in recursion, but I got not difference in performance.

EDIT 2: this code was tested and proved useful for lists and collections of 10 to 1500 react elements with substantial mounting time ( 2–3ms ). You might also have a look at react-virtualized as an external solution