How to Effectively Render the Large Set of Data in React

Quick Summary

When rendering the large set of data, we all facing some issues related but the big companies do something to avoid such things to affect their application performance.

When you have to render a list of more than 25000 records you notice a significant performance delay on your React application even you are using cutting-edge technology like react, babel, typescript, chrome, etc.

Let’s start rendering a list that contains 25000 records

Now your application starts being to slowdown while rendering this component, now you have 3 options to effectively render this

1. Pagination
2. V-DOM based Rendering

Remember

Your user can’t able to see 25000 records at the time and they don’t want to to that

Pagination

Pagination is the one of dead simple thing yet powerful to render the large set of data.

For this, I am going to rc-paginate

https://react-component.github.io/pagination/?path=/story/rc-pagination--styles

V-DOM Based Rendering

V-DOM based rendering are give the performance as same as pagination but depends on the scrolling while the pagination depends on clicks

For this, I am going to use the react-window package

When compared to another virtual-list render library react-window do very well. Please check out this article for further reading.

Rendering large lists with react-window

Thanks for sticking until the end :)

P.S. 👋 Hi, I’m Naveen DA! If you liked this, consider following me on Twitter and sharing the article with your developer friends 🐋😀