List optimization

Learn FlatList and SectionList optimization.

List optimization

In React Native, long lists are rendered with FlatList or SectionList. Misuse re-renders the whole list on every scroll and freezes the UI. Proper use renders only the on-screen items (virtualization).

Key settings: keyExtractor, getItemLayout, windowSize, removeClippedSubviews. If the list item is wrapped in memo, only the changed item renders.

getItemLayout

getItemLayout lets FlatList know an item's position without measuring. With fixed-height items, scrolling gets faster and jump-to-index becomes possible.

Its signature is (data, index) => ({ length, offset, index }). If the item height is variable, getItemLayout cannot be used; FlatList must measure then.

Exercise Optimize the FlatList

Write a FlatList component. Set data to items, keyExtractor to return each item's id, and renderItem to show a Text. Import FlatList from react-native.

Show example solution

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

const items = [{ id: '1', title: 'One' }];

export default function App() {
  return (
    <FlatList
      data={items}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
}

Test yourself

What does keyExtractor do in FlatList?
- Gives a unique key
- Loads images
- Picks colors
- Formats dates
Show answer

Loads images — keyExtractor gives each item a unique key.

Write the FlatList prop name

<FlatList
  data={items}
  ____={item => item.id}
  renderItem={renderItem}
/>

Show answer

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

Match the FlatList settings

keyExtractor

Unique key
getItemLayout

Fixed height
windowSize

Render window
removeClippedSubviews

Removes offscreen

Next lesson: Memory leaks

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies