Optimizing Rendering Performance

Ten rows out of 10,000. That is how many a FlatList creates on its first render, and the count below comes from a run of this code.

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

const PRODUCTS = Array.from({ length: 10000 }, (_, i) => ({
  id: `p${i}`,
  name: `Product ${i}`,
}));

function ProductList() {
  return (
    <FlatList
      data={PRODUCTS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

items in data 10000
renderItem calls on first render 10
rows in tree 10 (Product 0 to Product 9)