Building Performant Lists in React Native 🏎️

Lists are everywhere in mobile apps, but poorly implemented lists can kill your app's performance. Let's learn how to build lightning-fast lists that can handle thousands of items!

FlatList Optimization

The key to performant lists is proper FlatList configuration:

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

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

const PerformantList = ({ data }) => {
  const renderItem = ({ item }) => <ListItem item={item} />;
  
  const getItemLayout = (data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  });

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      getItemLayout={getItemLayout}
      initialNumToRender={10}
      maxToRenderPerBatch={5}
      windowSize={10}
      removeClippedSubviews={true}
      updateCellsBatchingPeriod={50}
    />
  );
};

VirtualizedList for Complex Scenarios

For more complex list requirements:

import { VirtualizedList } from 'react-native';

const CustomVirtualizedList = ({ data }) => {
  const getItem = (data, index) => data[index];
  const getItemCount = (data) => data.length;

  return (
    <VirtualizedList
      data={data}
      initialNumToRender={4}
      renderItem={({ item }) => <ListItem item={item} />}
      keyExtractor={(item) => item.id}
      getItemCount={getItemCount}
      getItem={getItem}
    />
  );
};

Memory Management

Prevent memory leaks in your lists:

const OptimizedListItem = memo(({ item, onPress }) => {
  const handlePress = useCallback(() => {
    onPress(item.id);
  }, [item.id, onPress]);

  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );
});

Performance Tips

1. Use getItemLayout when possible
2. Implement proper keyExtractor
3. Memoize list items
4. Use removeClippedSubviews
5. Optimize images with lazy loading

Your users will love the smooth scrolling! ⚡