Why FlatList handles large datasets efficiently in React Native

Introduction

FlatList shows only a small part of a big list on the screen at a time. This saves memory and makes the app faster.

When you have a long list of items like messages or contacts.

When you want smooth scrolling without delays.

When your app needs to save battery and memory.

When you want to load items as the user scrolls down.

When you want to avoid freezing the app with too many items rendered.

Syntax

React Native

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

function MyList() {
  const data = [{id: '1', title: 'Item 1'}, {id: '2', title: 'Item 2'}];

  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({item}) => <Text>{item.title}</Text>}
    />
  );
}

FlatList only renders items visible on the screen plus a small buffer.

It uses a keyExtractor to identify items uniquely for efficient updates.

Examples

Empty list: FlatList shows nothing but still works without errors.

React Native

const data = [];

<FlatList
  data={data}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.title}</Text>}
/>

Single item: FlatList renders just one item efficiently.

React Native

const data = [{id: '1', title: 'Only Item'}];

<FlatList
  data={data}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.title}</Text>}
/>

Large list: FlatList renders only visible items, keeping performance smooth.

React Native

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

<FlatList
  data={data}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.title}</Text>}
/>

Sample App

This app shows 1000 items using FlatList. Only items visible on screen are rendered, so scrolling stays smooth and memory use stays low.

React Native

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

export default function App() {
  const data = Array.from({length: 1000}, (_, index) => ({id: String(index), title: `Item ${index + 1}`}));

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({item}) => <Text style={styles.item}>{item.title}</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 40 },
  item: { padding: 10, fontSize: 18, borderBottomWidth: 1, borderColor: '#ccc' }
});

Important Notes

FlatList renders only visible items plus a small buffer, reducing memory use.

Time complexity for rendering is better than rendering all items at once.

Common mistake: Using FlatList without a unique keyExtractor causes rendering issues.

Use FlatList instead of ScrollView for large lists to avoid slow performance.

Summary

FlatList improves performance by rendering only visible items.

It helps apps handle large lists smoothly and efficiently.

Always provide a unique keyExtractor for best results.