Difference between FlatList and VirtualizedList

Question

I am new in react native, and am confused about the difference between FlatList and VirtualizedList.

So,

1. What are the differences between FlatList and VirtualizedList ?
2. When should I use each ?

Answer 1

The <FlatList> is a performant interface for rendering basic, flat lists.

On the other side, the <VirtualizedList> is a base implementation of the <FlatList> and <SectionList> components, which are also better documented. In general, <VirtualizedList> should only really be used if you need more flexibility than FlatList provides, e.g. for use with immutable data instead of plain arrays.

FlatList example:

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

VirtualizedList example:

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <VirtualizedList
        data={DATA}
        initialNumToRender={4}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.key}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  );
}

More info:

https://reactnative.dev/docs/virtualizedlist

https://reactnative.dev/docs/flatlist