Why FlatList handles large datasets efficiently in React Native - Build It to Prove It

Build: FlatList Efficiency Demo

This screen shows a list of 1000 items using FlatList to demonstrate efficient handling of large datasets in React Native.

Target UI

-------------------------
| FlatList Efficiency   |
|-----------------------|
| Item 1                |
| Item 2                |
| Item 3                |
| ...                   |
| Item 1000             |
-------------------------

Use FlatList to render 1000 items

Each item shows text 'Item X' where X is the item number

Ensure smooth scrolling performance

Use keyExtractor for stable keys

Render only visible items to save memory

Starter Code

React Native

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

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

  // TODO: Implement FlatList to render data efficiently
  return (
    <View style={styles.container}>
      {/* Add FlatList here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    backgroundColor: '#fff'
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc'
  },
  title: {
    fontSize: 16
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

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

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

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

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={renderItem}
        initialNumToRender={20}
        maxToRenderPerBatch={20}
        windowSize={10}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    backgroundColor: '#fff'
  },
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc'
  },
  title: {
    fontSize: 16
  }
});

This example uses React Native's FlatList to efficiently display 1000 items. Instead of rendering all items at once, FlatList only renders the items visible on the screen plus a small buffer. This saves memory and improves performance.

Key points:

• data: The array of 1000 items.
• keyExtractor: Provides stable keys for each item, helping React identify items uniquely.
• renderItem: Defines how each item looks.
• initialNumToRender, maxToRenderPerBatch, and windowSize: Control how many items render initially and during scrolling to balance performance and smoothness.

This approach is like only showing a few pages of a big book at a time instead of opening the whole book at once.

Final Result

Completed Screen

-------------------------
| FlatList Efficiency   |
|-----------------------|
| Item 1                |
| Item 2                |
| Item 3                |
| ...                   |
| Item 1000             |
-------------------------

User can scroll smoothly through the list of 1000 items

Only visible items are rendered to keep app fast

No lag or freezing during scrolling

Stretch Goal

Add a search bar to filter the list items by their title

💡 Hint

Use a TextInput above FlatList and filter the data array based on the input text, then pass the filtered array to FlatList's data prop