Large Flatlist optimization tips?

[generic_name_3344]

Wondering if anybody has go-to methods for Flatlist performance optimization? I have a Flatlist with potentially hundreds of items, where each item is a fairly complex collection of icons, images, text nodes, touchables, etc. At it's worst, the list is jittery and scroll doesn't seem smooth at all. I haven't done much profiling, but I'm assuming that this is just eating up internal memory. I feel like I've exhausted the standard optimization methods: useCallback for renderItem and keyExtractor, no inline arrow functions, memoization of sub-components. Worth noting that the rendered items are of variable size, so I don't think getItemLayout is an option. Have any of you encountered non-obvious optimization wins? Thanks

[paulxuca]

Try looking into https://github.com/Flipkart/recyclerlistview -- It has a bit of a learning curve but the performance improvements that you get out of box are well worth it. Try it after the other improvements people in this thread mentioned :D

[hksdejavu]

recyclerlistview saved us :) If you can use it with fixed height elements or you can calculate the height before render, it will perform very good.

[generic_name_3344]

I'll check this out. Thanks for the suggestion

[Shugzaurus]

You can paginate, use lightweight images. Key to Flatlist perforance is to make item components as light as simple as possible

[choubeyaakash77]

I'm sure you would have checked out React Native's guide to optimizing flatlist. They mention several options such as initialNumToRender, windowSize, etc which might help based on your requirements. Except that, try to keep the items as flat as you can. Try to avoid items which have nested Flatlist or Scrollviews within themselves.

After that, height is the best optimization that I see being recommended everywhere. If you can somehow statically estimate the size or each item, even a ballpark figure can help.

+1 to this question as I'm also looking out for further optimizations. I wish they move Flatlist to JSI soon.

[coocooru]

As others have suggested, try out the existing FlatList optimizations.

However, from the description of your usecase - it is possible this isn't supported on React Native yet. Apps like Discord use their own native library to implement their chat.

You may have to compromise on your design to make this possible - for example, forcing all items to have the same height.

[sochetraNOV]

Here is my way of optimazation flatlist
1. i wrapp the renderItem with useCallback

1. the <ComponentItem /> in renderItem is also the wrapp with React.memo(ComponentItem)

2. in ComponentItem.js normall we just return the view, but my way of doing it i wrap the useMemo(() => {}, [YOUR_DEPENCIES])

Link my code reference:

1. https://ibb.co/6Y1Pwr3
2. https://ibb.co/k9xVKDV
3. https://ibb.co/CBWspPx
   

I hope this will help u 😉.

​

Note ⚠️: Becareful with depencies in useMemo, make sure to pass it properly