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

Build: Optimized FlatList Screen

This screen shows a list of 1000 items using FlatList with performance optimizations to ensure smooth scrolling and low memory use.

Target UI

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

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

Implement keyExtractor for stable keys.

Use getItemLayout to optimize scroll performance.

Use initialNumToRender to limit initial render to 20 items.

Use maxToRenderPerBatch to 20 for batch rendering.

Use windowSize to 10 to control offscreen rendering.

Use React.memo or equivalent to avoid unnecessary re-renders of list items.

Starter Code

React Native

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

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

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

export default function OptimizedFlatListScreen() {
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        // TODO: Add optimization props here
      />
    </View>
  );
}

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

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

React Native

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

const ITEM_HEIGHT = 60;

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

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

export default function OptimizedFlatListScreen() {
  const keyExtractor = (item) => item.id;

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

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

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

We created a list of 1000 items labeled from 'Item 1' to 'Item 1000'. To optimize FlatList performance, we did several things:

• Used keyExtractor to provide stable keys for each item, which helps React track items efficiently.
• Implemented getItemLayout because all items have the same height. This lets FlatList calculate scroll positions without measuring each item, improving scroll speed.
• Set initialNumToRender and maxToRenderPerBatch to 20 to limit how many items render initially and in each batch, reducing memory use.
• Used windowSize of 10 to control how many items outside the visible area are rendered, balancing smoothness and resource use.
• Wrapped the Item component with React.memo to avoid re-rendering items unnecessarily when props don't change.

These combined techniques make the FlatList smooth and efficient even with a large number of items.

Final Result

Completed Screen

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

User can scroll smoothly through 1000 items without lag.

Each item displays its label like 'Item 1', 'Item 2', etc.

FlatList efficiently renders only visible items and a small buffer.

Stretch Goal

Add pull-to-refresh functionality to reload the list data.

💡 Hint

Use FlatList's refreshing and onRefresh props with a state to simulate data reload.