CODEWITHSUNDEEP
javascriptreactjsredux
erichardson30
erichardson30

Reputation: 5044

ReactJS handling a lot of data in state

I have a React application that needs to handle a lot of data. Overall it's a simple application :

The catch is, depending on what is being searched for...the table needs to display up to 1,000 rows by about 100 columns. When the http request returns this data and set in state, the application pretty much becomes unusable. Any other attempt to update state after it contains that data either takes forever or crashes the browser. Even when I limit the table to display 20 rows x 100 columns, the state update is significantly faster, but still noticeable to update.

I tried scouring the web to find a good solution and have come up short so any ideas/help/suggestions are welcome. If redux will help, I have no issue implementing that, I just don't want to waste my time if there is no payoff.

Upvotes: 4

Views: 1662

Answers (2)

ohsully
ohsully

Reputation: 502

You're probably re-rendering the entire table along with the search bar whenever you type in it. Maybe try putting the table into a subcomponent which implements shouldComponentUpdate(). Is the table data supposed to dynamically update whenever you type a character into the input? That might be expensive, you could also consider only re-rendering the table when a user clicks the "search" button by the input.

Rather than beat around the bush trying to figure out if it's a rendering issue, though, I recommend using the React performance tools*. Benchling has a solid blog post which walks through the process of performance debugging in React, but the magic is Perf.printWasted(). It will show you how much time was spent re-rendering components which were the same after the rendering (e.g. your table when you're only changing the text input). Test steps:

  1. From the console, run: Perf.start()
  2. type in your input, ideally just one keystroke
  3. console : Perf.stop()
  4. console : Perf.printWasted()

This method is super painless, but you can also use the Chrome profiling tools to find out the same info.

*I just found out that they've been deprecated in hot-off-the-press React 16, but you're likely still using a 15.x variant which works fine.

Also, +1 for react-virtualized! It's excellent, supports many columns and layouts.

Upvotes: 4

uselesssmile
uselesssmile

Reputation: 124

If I understood you correctly your problem is not the amount of data - problem in DOM rendering.

I think the best solution for you will be to render only visible part of table. For example try to use this library or similar.

Upvotes: 1

Related Questions