FlatList optimization techniques in React Native

Introduction

FlatList helps show long lists smoothly on mobile. Optimizing it makes your app faster and uses less battery.

When showing a long list of items like messages or contacts.

When your list scrolls slowly or lags on older phones.

When you want to save battery by not loading all items at once.

When you want to avoid the app freezing while scrolling.

When your list items have images or complex layouts.

Syntax

React Native

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const MyList = ({ data }) => {
  const renderItem = ({ item }) => <Text>{item.title}</Text>;

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={21}
      removeClippedSubviews={true}
      getItemLayout={(data, index) => (
        {length: 50, offset: 50 * index, index}
      )}
    />
  );
};

initialNumToRender controls how many items load first.

getItemLayout helps FlatList know item sizes to scroll faster.

Examples

Unique key for each item helps React track items efficiently.

React Native

keyExtractor={item => item.id.toString()}

Load only 5 items first to save memory on big lists.

React Native

initialNumToRender={5}

Removes items outside the screen to save resources.

React Native

removeClippedSubviews={true}

Use when all items have the same height to speed up scrolling.

React Native

getItemLayout={(data, index) => ({length: 60, offset: 60 * index, index})}

Sample App

This example shows a list of 1000 items. It uses FlatList optimizations to keep scrolling smooth and fast.

React Native

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const data = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString(), title: `Item ${i + 1}` }));

const MyOptimizedList = () => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={21}
      removeClippedSubviews={true}
      getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    height: 50,
    justifyContent: 'center',
    paddingLeft: 20,
    borderBottomWidth: 1,
    borderColor: '#ccc'
  }
});

export default MyOptimizedList;

Important Notes

Setting getItemLayout is very helpful if all items have the same height.

Use removeClippedSubviews carefully; it can cause issues with complex item layouts.

Too high initialNumToRender or maxToRenderPerBatch can slow down the app start.

Summary

FlatList optimization helps your app scroll smoothly and use less memory.

Use keyExtractor, initialNumToRender, and getItemLayout for better performance.

Test your list on real devices to find the best settings.