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.

Practice

1. What is the main purpose of using FlatList in React Native?

easy

A. To efficiently render long lists by only rendering visible items

B. To create complex animations for list items

C. To handle user authentication in the app

D. To manage app navigation between screens

Solution

1. Step 1: Understand FlatList's role

   FlatList is designed to render lists efficiently by only rendering items visible on the screen.

2. Step 2: Compare options

   The other options describe unrelated features like animations, authentication, and navigation.

3. Final Answer:

   To efficiently render long lists by only rendering visible items -> Option A

4. Quick Check:

   FlatList optimizes rendering = A [OK]

Hint: FlatList renders only visible items for performance [OK]

Common Mistakes:

• Thinking FlatList handles navigation
• Confusing FlatList with animation libraries
• Assuming FlatList manages user login

2. Which of the following is the correct way to provide a fixed height for each item in a FlatList using getItemLayout?

easy

A. getItemLayout={(data, index) => ({length: index, offset: 50, index})}

B. getItemLayout={(data, index) => ({length: 50, offset: index, index})}

C. getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})}

D. getItemLayout={(data, index) => ({length: 50, offset: 50 + index, index})}

Solution

1. Step 1: Understand getItemLayout parameters

   getItemLayout expects an object with length (item size), offset (distance from start), and index.

2. Step 2: Calculate offset correctly

   Offset should be item height multiplied by index to position items correctly.

3. Final Answer:

   getItemLayout={(data, index) => ({length: 50, offset: 50 * index, index})} -> Option C

4. Quick Check:

   Offset = item height * index = B [OK]

Hint: Offset equals item size times index in getItemLayout [OK]

Common Mistakes:

• Using index as offset directly
• Adding index to offset instead of multiplying
• Swapping length and offset values

3. Given this FlatList snippet, what will be the initial number of items rendered on screen?

  <FlatList
    data={data}
    renderItem={({item}) => <Text>{item}</Text>}
    initialNumToRender={5}
  />

medium

A. 5 items

B. All items in data

C. 10 items

D. No items until scrolled

Solution

1. Step 1: Understand initialNumToRender prop

   This prop controls how many items FlatList renders initially on screen.

2. Step 2: Check the value given

   initialNumToRender is set to 5, so FlatList renders 5 items first.

3. Final Answer:

   5 items -> Option A

4. Quick Check:

   initialNumToRender = 5 means 5 items rendered initially [OK]

Hint: initialNumToRender sets initial visible items count [OK]

Common Mistakes:

• Assuming all items render at once
• Confusing initialNumToRender with maxToRenderPerBatch
• Thinking no items render until scroll

4. Identify the error in this FlatList usage that causes slow scrolling:

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

medium

A. renderItem should return a View, not Text

B. keyExtractor should return index instead of item.id

C. data prop should be an object, not an array

D. removeClippedSubviews should be true to improve performance

Solution

1. Step 1: Understand removeClippedSubviews effect

   Setting removeClippedSubviews to true helps FlatList remove off-screen items from memory, improving scroll performance.

2. Step 2: Analyze current setting

   Currently, removeClippedSubviews is false, which can cause slow scrolling due to extra memory use.

3. Final Answer:

   removeClippedSubviews should be true to improve performance -> Option D

4. Quick Check:

   removeClippedSubviews true improves scroll speed [OK]

Hint: Enable removeClippedSubviews for better scroll performance [OK]

Common Mistakes:

• Ignoring removeClippedSubviews prop
• Using index as keyExtractor causing re-renders
• Thinking renderItem must return View only

5. You have a FlatList with 1000 items of fixed height 60. To optimize scrolling performance, which combination of props should you use?

hard

A. initialNumToRender=50, maxToRenderPerBatch=50, windowSize=10, getItemLayout missing

B. initialNumToRender=10, maxToRenderPerBatch=10, windowSize=5, getItemLayout provided

C. initialNumToRender=1, maxToRenderPerBatch=1, windowSize=1, getItemLayout missing

D. initialNumToRender=1000, maxToRenderPerBatch=1000, windowSize=20, no getItemLayout

Solution

1. Step 1: Use getItemLayout for fixed height items

   Providing getItemLayout lets FlatList calculate item positions quickly, improving scroll speed.

2. Step 2: Choose reasonable rendering batch sizes

   initialNumToRender=10 and maxToRenderPerBatch=10 balance initial load and batch rendering without overloading memory.

3. Step 3: Set windowSize to control offscreen rendering

   windowSize=5 keeps a small buffer of items rendered outside viewport for smooth scrolling.

4. Final Answer:

   initialNumToRender=10, maxToRenderPerBatch=10, windowSize=5, getItemLayout provided -> Option B

5. Quick Check:

   Balanced props + getItemLayout = D [OK]

Hint: Use getItemLayout with balanced batch sizes for big lists [OK]

Common Mistakes:

• Rendering all items at once causing lag
• Missing getItemLayout for fixed height items
• Setting windowSize too large or too small