Question 73268 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to optimize rendering of thousands rows of data in ReactJS?

I’m currently using HTML Table element and styled using blueprintjs. I want to pass thousands rows of data to the table. I know it is crazy and some have suggested in using windowing like react-window or pagination. But the problem is that, I want to be able to filter through the whole data, so I’ll need the data to be present in the client side instead of paginating it from the database so that I can do .filter() live. Any recommendation on how I can render all of the data while also keeping up the performance?

Tags:

2

Answers


  1. 0

    I think you can use indexedDb and storing all data in to it, and like any database you can search and find any record, for getting data and storing them to indexedDb you can get data by pagination from server and after each request that returns part of your whole data try to save it in to database until all data received.

    Login or Signup to reply.
  2. 0

    Optimizing your render,first you should know which affect the performance,it is the computation of the data,or it is the render of the page;

    if it is the computation,you can use web worker or webAssembly to speed your computation;

    if it is the render, you can consider use a package like:ag-grid ,or you can only render the part of the table in the view,and when scroll the view ,you can set other data to render in the table.

    Because this is a advice, no code for you to use immediately,hope it can help you,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search