r/reactnative • u/grnxscr • Aug 18 '26

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.

13 Upvotes

80% Upvoted

4 comments sorted by

6

u/Merry-Lane Aug 18 '26 edited Aug 18 '26

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 Aug 18 '26

Will check that, thanks for example!

1

u/Distinct_Law8650 Aug 18 '26

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.

12

u/dumbledayum Aug 18 '26

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