FlatList performance optimization in React Native - Mini App: Build & Ship

Build: Optimized FlatList Screen

A screen that shows a long list of items using FlatList with performance improvements.

Target UI

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

Use FlatList to display 1000 items labeled 'Item 1' to 'Item 1000'.

Implement keyExtractor for stable keys.

Use getItemLayout to optimize scroll performance.

Use initialNumToRender to limit initial rendering.

Use removeClippedSubviews to improve memory usage.

Avoid inline functions in renderItem.

Add simple styling for readability.

Starter Code

React Native

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

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

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

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

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

const ITEM_HEIGHT = 50;

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

export default function OptimizedFlatList() {
  const renderItem = useCallback(({ item }) => {
    return <Text style={styles.item}>{item.title}</Text>;
  }, []);

  const getItemLayout = (_data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        initialNumToRender={10}
        getItemLayout={getItemLayout}
        removeClippedSubviews={true}
      />
    </View>
  );
}

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

We created a constant ITEM_HEIGHT to define the height of each item. This helps getItemLayout calculate the position of each item, which improves scroll performance by avoiding measurement on the fly.

We used useCallback to memoize the renderItem function, preventing unnecessary re-renders.

Setting initialNumToRender to 10 limits how many items render initially, speeding up the first load.

removeClippedSubviews frees memory by unmounting items outside the viewport.

These combined optimizations make the FlatList smooth and efficient even with 1000 items.

Final Result

Completed Screen

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

User can scroll smoothly through 1000 items.

Items load quickly without lag.

Memory usage stays low due to clipping.

Stretch Goal

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

💡 Hint

Use a TextInput above the FlatList and filter the data array based on the input text, updating the FlatList's data prop.