CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
Kelvin
Kelvin

Reputation: 713

Rendering large tables in React & Redux app causes performance issues

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.

Upvotes: 2

Views: 7867

Answers (1)

Andreyco
Andreyco

Reputation: 22862

Use virtualised table to render *large amount of data.

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

Upvotes: 5

Related Questions