FlatList

FlatList adalah komponen virtualized list di React Native yang hanya me-render item yang terlihat di viewport (plus buffer). Berbeda dengan ScrollView yang me-render semua children sekaligus, FlatList lazy-load item — menghapus yang tidak terlihat dan membuat yang baru saat scroll. Ini krusial untuk list dengan ratusan atau ribuan item. Props penting: data (array), renderItem (function render), keyExtractor (unique key), onEndReached (infinite scroll), refreshing + onRefresh (pull-to-refresh). Optimasi performa: getItemLayout (untuk item tinggi fixed), React.memo pada renderItem, initialNumToRender, maxToRenderPerBatch. Untuk list yang lebih kompleks, ada SectionList (grouped) dan FlashList dari Shopify (5x lebih cepat).

Contoh Kode

import { FlatList } from "react-native";

<FlatList
  data={items}
  renderItem={({ item }) => <Item title={item.title} />}
  keyExtractor={item => item.id}
  onEndReached={loadMore}
  onEndReachedThreshold={0.5}
/>