React Redux handling large data

Question

I am currently working on a tool that reads Excel files and displays them in a webApp. I split just like in Excel every worksheet in different tabs. When switching Tabs its taking like 2 seconds to this. That's because the Excel -> Json is 8000+ Rows long. It's probably redux that can't handle such massive Json's.

I did some research but I don't know if any of my solutions could work. And if so which one would be the best ?

1. immutable.js
2. redux-orm
3. Multiple Stores (But this is a "don't")

Maybe someone has a better solution for handling large data.

Answer 1

Redux is not the issue

Redux can handle huge amounts of data and should not be an issue in this case. It's more likely that it is a problem occurring from a rerender. Even tabs that are not in the view are likely to rerender as you swap between them, to test this remove extra tabs until you just have 2 and test clicking between them and seeing how long the rerender takes. Read the performance section in the docs here.

Optimize

When dealing with large amounts of data micro optimisations can really help. If you are using the Container component, Presentational component pattern then make sure you presentational components are using the PureComponent subclass. This will help you stop re-renders that eat memory.

The alternative to PureComponent is shouldComponentUpdate, you can specify the rules of when an update/rerender should happen.

Inside the react dev tools there is a check box that lets you check when a component rerenders please check that and start moving around your app. It will show you all of the pointless rerenders that are being fired.

Another way to help optimise is lazy load, "why show 8000 records when the screen can only fit 100?". This has 2 effects, you don't get data that you're not going to look at and you dont render cells that are not on the screen.

I hope this gives you some idea of how to move forward, good luck.