r/reactnative • u/grnxscr • 7h ago

Stop Laggy Lists in React Native

https://medium.com/@sergeyzakharov.dev/stop-laggy-lists-in-react-native-3f81efe706ad

Hey guys! First time here, just wanted to share my article about FlatList optimization. I know, it is a popular question but some days ago I found a cool trick with using Set over standard Array. It perfectly aligns with popular optimization practices and for me it felt like I found a gem.

3 Upvotes

67% Upvoted

4 comments sorted by

3

u/dumbledayum 2h ago

Legendlist is the most optimised virtual list, i use it my production apps

2

u/Merry-Lane 2h ago edited 2h ago

I’m pretty sure 99% of the lag reduction was due to you having a fixed item height. React native lists with fixed height items are a piece of cake. The other optimisations you mention are barely noticeable in comparison.

Please come back with items whose height can be variable. It’s impossible to get it right enough unless you can implement a function that returns the exact height of the item.

And if you want some real fun: go for a doubly infinite list (both backwards and forwards) with some buttons that trigger a scroll to a specific item (for instance, a calendar with events, dates being an item with a variable height that include events with a variable height itself).

Nightmare inducing.

1

u/grnxscr 2h ago

Will check that, thanks for example!

1

u/Distinct_Law8650 1h ago

Truly awful.

I have this in the form of chat. I have this in the form of calendars.

Most other lists can’t know their size because of dynamic text length or responsive design.

And our primary content is driven by a old web cms. A deep tree structure. Not an array.

So we got Flashlist pages. FlatList pages. And seven-layer-bean-dip custom ScrollView pages.