Low performance with a SpatialNavigationVirtualisedList and lots of data

[PandaRN94]

Describe the bug A clear and concise description of what the bug is.

To Reproduce

          <SpatialNavigationVirtualizedList
            key={'gridRailHome'}
            data={rails}
            renderItem={_renderItem}
            itemSize={selectSize}
            orientation="vertical"
            numberOfRenderedItems={30}
            numberOfItemsVisibleOnScreen={15}
            nbMaxOfItems={rails?.length}
            style={{
              width: Dimensions.get('window').width - Theme.constants.baseMenuWidth + 1,
            }}
          />

Expected behavior The list is lazy loading and maintains high performance correctly.

Actually behavior The list is loaded all at once without any lazy loading logic being applied

Version and OS

• Library version: 3.6.1
• React Native version: 0.72.0

Additional context Use a data set of at least 40 elements, as render items we need to use other SpatialNavigationVirtualisedLists, so we have a SpatialNavigationVirtualisedList that renders other SpatialNavigationVirtualisedLists All render item have differnt height size

[pierpo]

Hey! Thank you for the issue. Can you provide more details? What are you trying to achieve visually? Isn't it a grid? You put 30 rendered items, isn't it a lot? They must be tiny items, as you also put as props that you see 15 of them.

[PandaRN94]

Hi, I cannot use the grid, it is a page made up of many horizontal list, there are 3-4 types of horizontal list that are rendered, with a height dimension of about 400 px, could I get around this problem by dividing the elements into several pieces and then render them using several different lists?

[pierpo]

Okay so, is it an infinite vertical list of lists ? I think you're facing the vertical virtualization of horizontal lists, which is... quite hard 😂

If I understood correctly, then we're not handling this case yet. Usually, our use case with such lists is that they're not infinite and in an acceptable amount so that we can put them in a vertical SpatialNavigationScrollView.

[pierpo]

But the thing is that you made it work, so I might be wrong.

In any case, you should know that virtualizing whole lists will perform poorly, because on each scroll you need to unmount a whole list and mount a whole new list (even though it is virtualized, it's still like... 20 elements to mount/unmount at once!)

I have no idea on how to approach this problem. Recycling elements is helpful (which our list kind of does -- I don't know about recycling whole lists though), but I don't think it is enough, especially if your lists are not similar enough.

[PandaRN94]

How much would be an acceptable quantity? That's right, it is a list with a large number of elements (they can vary between about 30 and 50 elements) and these elements are themselves lists, horizontally, with about 15 elements in them

[pierpo]

Have you tried not virtualizing vertically? Mounting/unmounting lists should be avoided as it will really stutter a lot.

It will make the initial rendering longer, but at least it should be smoother afterwards!

[PandaRN94]

If I do not virtualise the list, I have to implement the scroll logic of the flatlist, right?

[pierpo]

Mmmmh I'm not sure I understand what you mean haha Can you provide a screenshot or a least a little drawing of the layout you're trying to achieve ? :grin:

My point was :

• horizontal virtualized lists for your content
• vertical scroll view to list the lists

But I'm not sure of what I understood of your layout.

[PandaRN94]

Exactly, now I am trying to be clearer,

I currently use a virtualised vertical list to render elements.

These elements can be of 4 types:

Horizontal virtualised list, with a size of 400 Horizontal virtualised list, with a size of 300 Focusable view, with a size of 270 Large Hero with two focusable buttons with a size of 800

The total number of elements may vary, between a minimum of 30 and a maximum of 50 The large hero is only present once, the rest of the elements come out "randomly".

[PandaRN94]

In addition, it has happened to me a few times that when scrolling through the vertical pricnipal list, after 5-6 items have been scrolled through, they are completely hidden and there is no way to return to seeing them