CODEWITHSUNDEEP
javascriptjsonreactjs
Shubham Tripathi
Shubham Tripathi

Reputation: 21

How to Fast Filter large json dataset in ReactJS

I have a large json dataset like: [ {"date":"2020-03-02", "state:"Delhi", "district":"East Delhi" ..... ..... } ..... ..... ] I have different filters like date,state,district,gender,age and so on ..I want to show data based on these filter in various Reactjs Components..But it is taking too much time to load on filters which is not very user friendly..the json contains more than 50K objects and loaded locally..I have used for loop and if else conditions to filter the data..But it is taking too much time...Is there any javascript or Reactjs approach to do this differently??

Upvotes: 2

Views: 1074

Answers (1)

Ay_mhwan
Ay_mhwan

Reputation: 185

My first advice will be to check what is taking the most of the time:

  • filtering the data (For easily check you can put a console log time before the function call and after and see)
  • rendering all the data (to easily check you can just render 10 element to see if it is faster)
  • maybe it is both (check the 2 previous)

It is likely that rendering all the data might take the most of the time, because rendering 50k item might be heavy for the browser. So you have multiple options:

  • pagination (but maybe it is not good for your UX)
  • Virtual list https://github.com/bvaughn/react-virtualized -> that kind of library will not render all the element directly, but only item than can be seen on the screen + few other and so if you scroll it loads more etc and for the user it almost like everything is already loaded

Upvotes: 2

Related Questions