FlatList: apa itu, API dan optimasi di React Native

Apa itu FlatList?

FlatList — komponen React Native yang mengimplementasikan daftar tervirtualisasi dengan rendering performa tinggi untuk volume data besar. Komponen ini dibangun di atas VirtualizedList dan menyediakan API deklaratif untuk membuat daftar datar dengan kompleksitas apa pun.

FlatList muncul di React Native 0.43 sebagai pengganti ListView yang sudah usang. Menurut data Meta (2026), FlatList digunakan di 85% aplikasi React Native yang bekerja dengan daftar. Komponen ini mendukung semua skenario umum: kontak, umpan berita, katalog produk, obrolan.

Sejarah dan tempat dalam ekosistem

Sebelum kemunculan FlatList, pengembang menggunakan ListView yang memerlukan konfigurasi manual penggunaan ulang sel. FlatList mengotomatiskan proses ini dengan memperkenalkan rendering berjendela mirip dengan RecyclerView di Android (2014) dan UICollectionView di iOS (2012). Dalam proyek modern, FlatList adalah standar de facto untuk semua daftar.

Bagaimana virtualisasi FlatList bekerja

Virtualisasi FlatList — mekanisme di mana komponen hanya merender elemen yang berada di area layar yang terlihat, ditambah buffer kecil di setiap sisi. Elemen lainnya tidak dibuat di DOM, menghemat memori dan mempercepat rendering.

Saat digulir, FlatList menggunakan kembali sel View yang sudah dibuat dengan mengganti data di dalamnya. Ini mencegah pembuatan ribuan View untuk daftar 10.000 elemen. Ukuran buffer default adalah 10 elemen di atas dan di bawah area yang terlihat, tetapi dapat dikonfigurasi melalui windowSize.

Konfigurasi optimal parameter ini memungkinkan menyeimbangkan antara kelancaran gulir dan konsumsi memori. Untuk daftar dengan elemen besar, disarankan mengurangi windowSize menjadi 5-7.

API dan properti utama FlatList

API FlatList mencakup serangkaian properti untuk mengonfigurasi tampilan dan perilaku daftar. Dua properti wajib — data (array data) dan renderItem (fungsi rendering elemen). keyExtractor meningkatkan performa dengan menyediakan kunci unik untuk setiap elemen.

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

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent menambahkan pemisah antar elemen, ListHeaderComponent dan ListFooterComponent — header dan footer daftar. Ini memungkinkan pembuatan tata letak kompleks tanpa pembungkus tambahan.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

Optimasi performa FlatList

Optimasi FlatList sangat penting untuk aplikasi dengan ratusan dan ribuan elemen. Tanpa konfigurasi yang benar, daftar dapat melambat saat digulir, mengonsumsi memori berlebihan, dan menyebabkan crash pada perangkat lemah.

Aturan pertama — gunakan keyExtractor dengan pengidentifikasi unik dan stabil. Indeks sebagai kunci menyebabkan penggunaan ulang sel yang salah dan bug status. Kedua — bungkus renderItem dalam useCallback dan gunakan React.memo untuk komponen elemen.

getItemLayout untuk tinggi tetap

Jika semua elemen memiliki tinggi yang sama, getItemLayout memungkinkan FlatList menghitung posisi gulir tanpa mengukur komponen. Ini memberikan peningkatan performa signifikan, terutama saat menggulir ke indeks tertentu.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo untuk data mencegah render ulang yang tidak perlu. Jika data berasal dari API, transformasikan sekali dan cache. Gunakan React.memo untuk komponen elemen guna menghindari rendering elemen yang tidak berubah.

Daftar horizontal dan karusel

FlatList horizontal dibuat dengan menambahkan properti horizontal={true}. Daftar mengubah arah gulir ke sumbu X, yang nyaman untuk karusel produk, galeri gambar, dan menu horizontal.

Dalam mode horizontal, penting untuk mengonfigurasi snapToInterval dan snapToAlignment dengan benar untuk gulir bertahap, seperti pada karusel native. Komponen secara otomatis menangani momentum dan pelepasan jari, berhenti di elemen terdekat.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged — callback yang dipanggil saat elemen terlihat berubah. Digunakan untuk analitik, pemuatan lambat gambar, dan aktivasi video hanya untuk kartu yang terlihat.

Pull-to-refresh dan pemuatan tak terbatas

Pull-to-refresh di FlatList diimplementasikan melalui properti refreshing dan onRefresh, yang bekerja bersama dengan status pemuatan. Saat daftar ditarik ke bawah, onRefresh dipanggil, dan flag refreshing memblokir panggilan berulang.

Pemuatan tak terbatas (infinite scroll) dikonfigurasi melalui onEndReached — callback yang dipicu saat mendekati akhir daftar. onEndReachedThreshold menentukan berapa elemen sebelum akhir peristiwa dipicu. Untuk paginasi biasanya digunakan pendekatan cursor-based.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Penting: onEndReached dapat dipanggil berkali-kali. Tambahkan flag isLoading untuk memblokir permintaan berulang hingga yang sebelumnya selesai. Gunakan ActivityIndicator di ListFooterComponent untuk menunjukkan pemuatan.