1

I have a large list of array that has about 10,000 lists and I want to minimize the rendering of object to the current list.

There are several solutions that I have found like react-window or react-virtualized to render only the visible components but it does not seem to suit for my current needs.

These 10,000 items will propagate the certain events to the upper components for this I have tried context but it seems to rerender every children even if one of them triggers the function this has lead to memoization hell. Every child and every components has been used unnecessary memoization.

I have simplified the array of object to be in the following format with key and arrays for quick processing

  var data = {
    key: [{},{},{}],
    key2: [{},{}],
    ...
    ...
    ..n
  }

The problem right now is react takes about a second to diff the components and this makes the whole app slow. If I go to profiler I see that react takes about 0.1ms for a components in the array this comes out to be 0.1 * 10000 ms which is way too large diffing time. I would like to memoize the components so when even if I add or update the objects inside the object it diffs only that components and does not rediff every component.

eg. Data manipulation equivalent in js
// Suppose only first object's title is changed and updated to state
data[key][0].title = 'asd'

This quickly adds up when the individual component will have it's own state and further child component and so on. I would like to have a efficient solution if possible for this.

Rajesh Paudel
  • 1,117
  • 8
  • 19
  • you should use profiling tools (react devtools, chrome devtools, etc) to figure out exactly where the slowness occurs. one solution could be to use pagination though. – Derek Dec 08 '21 at 04:46
  • @Derek I have used the devtool profiling and it seem like the major time is I think in diffing. If any single element change the diff through whole array is making it way too slow for rendering and showing changes. – Rajesh Paudel Dec 08 '21 at 04:48
  • Any chance of putting this stuff in a database that can paginate the output rather than give it to you in one giant payload? – Alexander Nied Dec 08 '21 at 05:19
  • @AlexanderNied Not really a chance with the kind of app I am making. It's kind of like a spreadsheet. And each key represents the data in row. These can also be dragged and dropped from a cell to another. So this makes it really hard to paginate – Rajesh Paudel Dec 08 '21 at 05:22

0 Answers0