React best practice for large number of data

Tags: #<Tag:0x00007efc64484dd0>

Hi again!

As you have noticed most of my questions are related to React. Right now I just want to ask for your tips in what would be the best approach for large data using React.

One of my previous questions was related to how to make the table faster in appending newly fetched data. But you mentioned that you are still working or going to solve related to eco-renderers.

Right now, the current performance is slow because we are appending new data if the user reaches the end of the row. What I’m thinking right now is just make it a page-based style. Like load 100 users but, instead of infinite-type of scrolling the user would click on page numbers and so on. Would you agree with me that it would increase the performance if we go that route?

Current performance:

  • if there are only about 20- 50 users (rows only), the whole app is not slow, like if we click another button outside the table, set the state for that button, it goes very quickly, it’s fast
  • but if there are about 100+ up to 1000 users in the table, clicking a button outside the table is very slow, it is somehow affecting the whole app

Guys, if you have a more robust solution using React please let me see it. I really need your advice on this one. Keep in mind that alongside the table we have also other states and components working on the app. Like clicking button, menus, search bar, etc. And every time we change a state it seems slow and is somehow affected by the table. But as I have stated above, if there are fewer numbers of data like 20-50 rows, it’s fast.

Thank you!

PS: I think the viewportRowRenderingOffset is also a bit hard to setup. I still don’t get it how to set it up properly.

Hi @hugh

It seems that paging is a reasonable option.

If you could provide a demo with your data type/custom extend and so on we will advise you more specific.