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.