In my application built on React and Redux, one of the pages needs to render a table with large amount of data (2k rows). On the initial page load, everything is fine. After the page gets rendered and I try to navigates to another page by clicking on sidebar, I notice there's a delay between my click and the next page starts to render. The delay only happens in page render, but doesn't happen in url - url gets updated immediately when I click on sidebar.

In addition, when I try to navigate back to the page that renders large table, the delay still happens.

According to my research, this rendering delay is proportional to numbers of items shown in the table. The more items, the longer delay.

I wonder if anyone has run into this issue before, and if there's any fix to that?

Thanks.

In my application built on React and Redux, one of the pages needs to render a table with large amount of data (2k rows). On the initial page load, everything is fine. After the page gets rendered and I try to navigates to another page by clicking on sidebar, I notice there's a delay between my click and the next page starts to render. The delay only happens in page render, but doesn't happen in url - url gets updated immediately when I click on sidebar.

In addition, when I try to navigate back to the page that renders large table, the delay still happens.

According to my research, this rendering delay is proportional to numbers of items shown in the table. The more items, the longer delay.

I wonder if anyone has run into this issue before, and if there's any fix to that?

Thanks.

• javascript
• reactjs
• redux
• react-router

1 Answer 1

Use virtualised table to render *large amount of data.

https://github./bvaughn/react-virtualized