FlatList performance optimization in React Native

Introduction

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

Showing a long list of messages in a chat app

Displaying many products in a shopping app

Listing contacts or friends in a social app

Showing a feed of posts or news articles

Rendering many images or items in a gallery

Syntax

React Native

import { FlatList } from 'react-native';

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

initialNumToRender controls how many items render first to show quickly.

getItemLayout helps FlatList know item sizes to scroll faster.

Examples

Render first 5 items quickly for a small list.

React Native

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id.toString()}
  initialNumToRender={5}
/>

Remove items outside viewport to save memory.

React Native

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id.toString()}
  removeClippedSubviews={true}
/>

Tell FlatList each item is 50 pixels tall for faster scroll.

React Native

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id.toString()}
  getItemLayout={(data, index) => ({ length: 50, offset: 50 * index, index })}
/>

Sample App

This app shows 1000 items in a list. It uses FlatList props to render only a few items at a time, remove items outside the screen, and know each item's height. This makes 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 ITEM_HEIGHT = 50;

export default function App() {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

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

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

Important Notes

Time complexity: FlatList renders only visible items, so rendering is O(visible items), not total items.

Space complexity: Memory use stays low by removing off-screen items with removeClippedSubviews.

Common mistake: Not using keyExtractor causes slow re-renders and warnings.

Use getItemLayout when item sizes are fixed to improve scroll performance.

Summary

FlatList shows long lists efficiently by rendering only visible items.

Use props like initialNumToRender, maxToRenderPerBatch, windowSize, and removeClippedSubviews to optimize performance.

Providing getItemLayout helps FlatList scroll faster when item sizes are fixed.