How to optimize your react native flatlist

Published in

Sanjagh

4 min readJan 29, 2019

When it comes to choosing react native over other frameworks specially native mobile application development, one thing that people really worry about is performance. although many living projects based on react native exist in which you can’t find serious performance issues on them but there are several rules / tips that you should observe in your application to achieve good performance result. In fact optimizing flatlist (or better to say VirtulizedList which is the base component for both flatlist and secitonlist) is one of the most challenging ones.

Viewport

Be careful about the view which your FlatList renders inside. Recently at Sanjagh we faced an awful rendering performance in first page of sign up process which is a simple section list with items containing checkboxes, Although we were observing optimization rules, there was no significant amount of improvement in rendering performance. We’ve finally realized that the main problem was that we were wrapping SectionList inside native-bases’s Content which extends from ScrollView . When you use a FlatList inside a ScrollView with same direction the list component doesn’t limits its viewport to the viewport which is visible, it extends itself, so some VirtualizedList features like windowSize might not work as expected.

Tweak your FlatList props

windowSize

This prop should not be confused with something like width or height , as the doc says it Determines the maximum number of items rendered outside of the visible area, in units of visible lengths, The default value iswindowSize={21} which means hey flatlist! render one screen for visible viewport with, 10 above and 10 below the viewport.

Pros: Setting a lower number will hugely improves render time and memory consumption

Cons: When you set a lower number for windowSize fast scrolling may result blank spaces

removeClippedSubviews

When set to true it will unmount components off the viewport

Pros: By setting this prop to true there is always a little amount of items rendered which will improve performance of the list

Cons: The community reported some bugs such as missing content

initialNumToRender

The number of list items rendered initially, this porp accepts number and it should be enough to fill the screen on all supported devices and not more. The default number is 10

Pros: A lower initialNumToRender will improve the initial render performance of list component itself

Cons: lower initialNumToRender will result in blank areas, so set a number that’s enough to fill the viewport in all supported devices, not more , not less

maxToRenderPerBatch

maxToRenderPerBatch determines how many list items will be rendered on each scroll. The default value is 1

Pros: By setting a highermaxToRenderPerBatch you will receive a higher fill rate which results less blank spaces

Cons: A higher maxToRenderPerBatch would decrease your js performance

updateCellsBatchingPeriod

As the name clearly says, it adjuts the time between each batch in ms, you should use this prop in combination with maxToRenderPerBatch to achieve your desired result. The default value is 50

Pros: Combining updateCellsBatchingPeriod with maxToRenderPerBatch will lead you to achieve your desired fillrate / performance (eg. load more items in a long period or load less items in a short period)

Cons: Pretty similar to maxToRenderPerBatch a lower updateCellsBatchinPeriod may cause js performance issues and a higher one would result blank spaces

keyExtractor

If your list items have not a key prop by default you should write keyExtractor method. React will use the key prop to identify which items have changed , removed, or added to list. check this article on importance of keys in react.

Optimize your list items

Make your list items as simple as possible

When you got a large list probably your list items have to be rendered several times so you should avoid using complex components as your list items and move the logic outside of the list item component whenever possible. apply other optimizations on your list items like using thumbnails for list of images to make your component more light and performant.

Use shouldComponentUpdate

You should either use PureComponent or implement shouldComponentUpdate otherwise react will show you a warning that your list items may have multiple wasteful re-renders, in this sceanrio when you’re optimzing your flat list items, it’s more efficient and wise to write a simple shouldComponentUpdate which fits your needs rather than using PureComponent’s shallow props / state comparison

Updating list items

When you need to update a single item in your existing list you shouldn’t modify the data prop of FlatList since it causes the list component all the way re-render, instead of that FlatList has a prop called extraData which is designed for updating your exisitng list items without updating the list itself or other list items, see the simple example below:

Conclusion

Be careful with views and layouts which contains FlatList component
Tweak your FlatList props (windowSize, initialNumToRender etc.) to find your desired performance and fillrate, note that you can hugely improve your FlatList performance by tweaking FlatList props
List items should be as light as possible
Don’t forget to use shouldComponentUpdate in list items
When you have to update your list items use extraData