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.

Practice

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

easy

A. To define the layout height of each item

B. To provide a unique key for each list item to improve rendering performance

C. To set the initial number of items to render

D. To enable pull-to-refresh functionality

Solution

1. Step 1: Understand the role of keys in lists

   Keys help React Native identify which items changed, added, or removed, improving rendering speed.

2. Step 2: Identify what keyExtractor does

   keyExtractor returns a unique key for each item, which is essential for efficient list updates.

3. Final Answer:

   To provide a unique key for each list item to improve rendering performance -> Option B

4. Quick Check:

   Unique keys = keyExtractor [OK]

Hint: Keys uniquely identify items for smooth list updates [OK]

Common Mistakes:

• Confusing keyExtractor with initialNumToRender
• Using index as key causing performance issues
• Thinking keyExtractor sets item layout

2. Which of the following is the correct way to set initialNumToRender in a FlatList?

easy

A. <FlatList initialNumToRender='10' />

B. <FlatList initialNumToRender={"10"} />

C. <FlatList initialNumToRender={10} />

D. <FlatList initialNumToRender>10</FlatList>

Solution

1. Step 1: Understand prop types in React Native

   Numeric props must be passed as numbers, not strings.

2. Step 2: Check each option's syntax

   <FlatList initialNumToRender={10} /> passes a number correctly with curly braces. Options A and C pass strings incorrectly. <FlatList initialNumToRender>10</FlatList> is invalid JSX syntax.

3. Final Answer:

   <FlatList initialNumToRender={10} /> -> Option C

4. Quick Check:

   Numeric props use curly braces [OK]

Hint: Use curly braces for numbers in JSX props [OK]

Common Mistakes:

• Passing numbers as strings in props
• Using invalid JSX syntax for props
• Confusing prop names with event handlers

3. Given this FlatList snippet, what will be the effect of adding getItemLayout?

const getItemLayout = (data, index) => ({length: 50, offset: 50 * index, index});

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  getItemLayout={getItemLayout}
/>

medium

A. Improves scroll performance by letting FlatList skip measurement of item sizes

B. Causes a runtime error because getItemLayout is missing required props

C. Makes FlatList render all items at once

D. Disables scrolling in the list

Solution

1. Step 1: Understand getItemLayout purpose

   It tells FlatList the size and position of each item upfront, avoiding costly layout calculations during scroll.

2. Step 2: Analyze the provided getItemLayout function

   The function returns fixed length and offset based on index, which is valid and improves performance.

3. Final Answer:

   Improves scroll performance by letting FlatList skip measurement of item sizes -> Option A

4. Quick Check:

   getItemLayout = faster scroll [OK]

Hint: Fixed item sizes speed up scrolling [OK]

Common Mistakes:

• Assuming getItemLayout causes errors without checking signature
• Thinking it renders all items immediately
• Believing it disables scrolling

4. You notice your FlatList is lagging when scrolling. Which of these fixes addresses a common mistake causing this?

medium

A. Implementing getItemLayout with fixed item sizes

B. Setting initialNumToRender to a very high number

C. Removing keyExtractor and using array index as key

D. Using inline anonymous functions in renderItem

Solution

1. Step 1: Identify common causes of lag in FlatList

   Using unstable keys or rendering too many items initially can cause lag.

2. Step 2: Evaluate each option's effect

   Removing keyExtractor and using array index as key worsens performance by using unstable keys. Setting initialNumToRender to a very high number renders too many items at once. Using inline anonymous functions in renderItem causes re-renders due to new function references. Implementing getItemLayout with fixed item sizes improves performance by optimizing layout calculations.

3. Final Answer:

   Implementing getItemLayout with fixed item sizes -> Option A

4. Quick Check:

   Fixed layouts = less lag [OK]

Hint: Avoid inline functions and use getItemLayout [OK]

Common Mistakes:

• Using array index as key causing re-renders
• Setting initialNumToRender too high
• Ignoring getItemLayout optimization

5. You have a large list with items of varying heights. Which combination of FlatList optimizations is best to improve performance without layout errors?

hard

A. Use getItemLayout with fixed height and no keyExtractor

B. Use keyExtractor with index as key and getItemLayout assuming fixed height

C. Set initialNumToRender very high and skip keyExtractor

D. Use keyExtractor with unique IDs and initialNumToRender set to a small number, but avoid getItemLayout

Solution

1. Step 1: Understand challenges with varying item heights

   Fixed height assumptions in getItemLayout cause layout errors if items vary in size.

2. Step 2: Evaluate options for best practice

   Use keyExtractor with unique IDs and initialNumToRender set to a small number, but avoid getItemLayout. This uses unique keys and limits initial render count, avoiding getItemLayout to prevent errors. Use keyExtractor with index as key and getItemLayout assuming fixed height uses index keys and fixed height, causing bugs. Set initialNumToRender very high and skip keyExtractor renders too many items and lacks keys, hurting performance. Use getItemLayout with fixed height and no keyExtractor lacks keys and assumes fixed height, causing errors.

3. Final Answer:

   Use keyExtractor with unique IDs and initialNumToRender set to a small number, but avoid getItemLayout -> Option D

4. Quick Check:

   Unique keys + small initial render + no fixed layout [OK]

Hint: Avoid getItemLayout if item heights vary [OK]

Common Mistakes:

• Using index as key causing re-renders
• Assuming fixed height for variable items
• Rendering too many items initially