{"id":3494,"date":"2020-07-16T01:58:24","date_gmt":"2020-07-15T20:28:24","guid":{"rendered":"https:\/\/codingislove.com\/?p=3494"},"modified":"2020-07-22T16:35:32","modified_gmt":"2020-07-22T11:05:32","slug":"optimize-react-native-flatlist-performance","status":"publish","type":"post","link":"https:\/\/codingislove.com\/optimize-react-native-flatlist-performance\/","title":{"rendered":"8 ways to optimize React native FlatList performance"},"content":{"rendered":"\n

FlatList is the component in React native<\/a> that is used to render a list of items. It works great for basic lists but FlatList will have some performance issues if not optimized properly causing laggy scroll and slow performance. Let’s see how to optimize react native<\/a> flatlist performance.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

1. Avoid arrow functions inline for renderItem<\/h2>\n\n\n\n

Don’t use arrow functions inline for renderItem<\/code> of the FlatList. It’s better if you avoid arrow functions inline for all the props of FlatList like keyExtractor<\/code>, ListHeaderComponent<\/code>, ListFooterComponent<\/code> etc.<\/p>\n\n\n\n

Using an arrow function inline re-creates the function on every re-render causing performance issues. It may not be too expensive for a normal component but it is very expensive for a list component that should re-render items on the fly.<\/p>\n\n\n\n

If you’re using a class component then move the renderItem<\/code> out of render function. If you’re using a functional component then use useCallback<\/code> for the renderItem<\/code> function. Here’s an example :<\/p>\n\n\n\n

\"flat<\/figure>\n\n\n\n
\"optimize<\/figure>\n\n\n\n

2. Don’t use 1080P HD images in the list<\/h2>\n\n\n\n

It is a known issue that android can’t handle 1080P HD images in the list. Even if iOS can handle HD images, it will still cause some performance issues. So Make sure to use Medium resolution photos. Max 720P but keep it as low as possible without compromising on the quality of the images.<\/p>\n\n\n\n

You can also cache and optimize the images using a library like react-native-fast-image<\/a> for better image performance in flatList.<\/p>\n\n\n\n

\"optimize<\/figure><\/div>\n\n\n\n
\"Use<\/figure><\/div>\n\n\n\n

3. Optimize maxToRenderPerBatch prop<\/h2>\n\n\n\n

maxToRenderPerBatch<\/code> prop is used to set the number of items to render on every scroll. 10 is the default number but you can decrease it further depending on the size of the list. I use a simple logic to optimize maxToRenderPerBatch<\/code> – For example, If 2 items in your list cover 100% of your screen height then set this prop around 3 to 5. If 5 items in your list cover 100% of your screen height then set maxToRenderPerBatch<\/code> to around 8.<\/p>\n\n\n\n

This logic will make sure that there’s always new list items rendered on scroll while also saving the resources by rendering only the number of items that we actually need. <\/p>\n\n\n\n

You might see some blank white spaces when scrolling the list very fast but practically that should be fine as no user would scroll that fast. It all depends on the type of list and the user experience of your list. So experiment the number to set maxToRenderPerBatch<\/code> and come up with the best number and optimize the flatList performance efficiently by rendering only the number of items that are actually required.<\/p>\n\n\n\n

4. Optimize windowSize prop<\/h2>\n\n\n\n

windowSize<\/code> prop is a measurement unit where 1 is equivalent to your viewport height. The default value is 21 (10 viewports above, 10 below, and one in between).<\/p>\n\n\n\n

Most cases you don’t need the number as big as 21. Again, it depends on the size of the items in your list. For example if each item in your list covers 50% of the device height (so 2 items in viewport) then you can set the windowSize to around 5. That should be enough because by the time you scroll next 10 items (2 * 5) new items would be rendered for sure.<\/p>\n\n\n\n

Experiment with this prop based on the size of your list items and come up with the best number to optimize react native flatList.<\/p>\n\n\n\r\n

\r\n
\r\n