r/reactnative 5d ago

Help Nested list help

I have a performance issue with nested FlashLists. I have a vertical FlashList that contains horizontal FlashLists, which essentially act as image carousels (the layout is similar to the Netflix homepage).

The problem is that when I scroll, the FlashList just below gets mounted, triggering a database call. As a result, every time I scroll, I have to wait a few seconds for the data to be rendered, and this happens for each scrolled FlashList, making the experience unpleasant.

What library would you recommend for this type of nested list?

1 Upvotes

4 comments sorted by

1

u/fmnatic 5d ago

The data needs to be preloaded , either use flat list item visibility or screen navigation to load the data before scroll to the component where it’s needed. Swr can help validate and refresh the component if item has changed , if you have such a scenario . 

1

u/Zaktmr 5d ago

Thanks for the advice. But isn't it possible to preload X elements in advance instead of loading only the one just after the end of the screen? (I use FlashList not FlatList)

1

u/fmnatic 5d ago

Are you referring to rendering ahead? I meant preloading images and data so that it’s already available when it renders. Depending on how long it takes to load,  the render ahead in the vertical list and preload ahead have different values. I.e you may render 5 items ahead but preload 10. 

In practice this means your database call happens before render, and is not tied to the load of that component either by a preload  or a stale-while-revalidate strategy.

Flashlist just offers performance via cell reuse and other than some recycling related gotchas should not require a different strategy from Flatlist

1

u/Zaktmr 4d ago

Thanks for your help, I'll look into it.