2

Not so long ago, I started working with react, and I have a performance problem.

I use react + redux + reselect + immutable.js. I have a lot data (like big table with data ~10mb).

My problem is: when I have ~10 000 rows, react creates 10 000 components with: individual connect, memoize selector.

1 row consist of ~50 keys (from different stores, for ex: col height, focus index), arrays and etc. For example key title.

When I modify store, for example change title in row #123, redux will execute 10 000 memoize selectors, compare results and it take ~1-2 sec for 10k rows!

How I can prevent connect calls when I know which component must exactly be re-rendered? Like signal "component with id: row-123 must run memoize selector and check changes" or any ideas?

I plan to try mobx but I don't actually sure that mobx will prevent unnecessary data comparing for every of 10k component.

P.S. I already thought about pagination, virtual scrolling, but I need to display all the data at the same time into the DOM

mixalbl4
  • 3,507
  • 1
  • 30
  • 44
  • do you really want to draw 10k component ? maybe use pagination ? – François Richard Jul 22 '19 at 13:47
  • @FrançoisRichard I dont wont, but I have to :) I already thought about pagination, virtual scrolling, but I need to display all the data at the same time in DOM :( – mixalbl4 Jul 22 '19 at 13:53
  • 2
    why do you need this ? who can read 10k line at the same time ? :/ – François Richard Jul 22 '19 at 13:59
  • @FrançoisRichard a lot of reasons. for ex: 1) for calculating summary scroll height (any row can consist custom height, images with height. 2) Searching by F3 3) DragNDrop from button of table to head of table. 4) Multi-select functionality, for selecting by moving cursor ... x) etc... p.s. Browser can do it and works FAST with DOM. It means that I am limited only by redux – mixalbl4 Jul 22 '19 at 14:04
  • @MixerOID you can implement all those features using pagination. It would be MUCH better. For search you can add custom search component and assign its focus for F3 or just leave as it is - it wouldn't hurt – Vasyl Butov Jul 22 '19 at 14:09
  • @VasylButov nope. For ex real scroll height for "whole content" will not work. I cant calculate it without drawing each row. – mixalbl4 Jul 22 '19 at 14:12
  • point 1. is irrelevant (you need 10k to calculate 10k height) , point 2. can (should ?) be done server side with pagination, point 3, use pagination + some filters feature, point 4. same, you'll use filter nobody will scroll 10k for multiselect ;;;; just my opinion though – François Richard Jul 22 '19 at 14:13
  • @FrançoisRichard Okay. I heard. But the task sounds completely different :( – mixalbl4 Jul 22 '19 at 14:15
  • @MixerOID do you use Immutable.js? It could be your answer – Vasyl Butov Jul 22 '19 at 14:17
  • @VasylButov yes. Without immutable.js situation much worse. – mixalbl4 Jul 22 '19 at 14:19
  • sounds different task yes, but 10k row in a browser, maybe it's better your app just being a way to download a spreadsheet, excel/libreoffice could do 10k row easily – François Richard Jul 22 '19 at 14:23

2 Answers2

0

As long as your app state is updated, each connected component will compare new and old state and properties (one by one) to understand whether a new component render is needed.

This operation is also supposed to trigger the selectors used to derive connected components' properties.

Redux's connect API exposes the possibility of customising the pre-rendering checks providing an options object with the following custom checks:

  • areStatesEqual
  • areOwnPropsEqual
  • areStatePropsEqual
  • areMergedPropsEqual
Andrea Carraro
  • 9,731
  • 5
  • 33
  • 57
  • My question is: how to prevent `each connected component will compare new and old state and properties (one by one)` in some cases. Prevent calling all connects – mixalbl4 Aug 01 '19 at 06:08
-2

I really wanted to comment but I cant, sorry for that. But I think "react-virtualized" can be what you are looking for

https://bvaughn.github.io/react-virtualized/#/components/List

acbay
  • 832
  • 7
  • 7
  • > P.S. I already thought about pagination, `virtual scrolling` ... I've already tried `react-virtualized` – mixalbl4 Jul 22 '19 at 14:53
  • Yes, I've read your statement. But i think your all requirements could be covered with virtual scrolling. Where do you exactly face a problem while trying react-virtualized? – acbay Jul 22 '19 at 15:02