Optimasi FlatList & VirtualizedList pada React Native untuk Ribuan Elemen

Mengapa FlatList Sering Terasa Berat?

Secara default, jika Anda melemparkan daftar ribuan array ke dalam FlatList tanpa optimasi properti, memori aplikasi akan melonjak dan proses rendering list item di thread JavaScript akan memicu jeda layar kosong putih saat digulir cepat.

4 Properti Wajib Penghemat Memori

<FlatList
  data={heavyItems}
  keyExtractor={(item) => item.id}
  renderItem={renderMemoizedItem}
  
  // 1. Beri tahu tinggi pasti elemen untuk menghindari kalkulasi dinamis yang lambat
  getItemLayout={(data, index) => ({
    length: 80,
    offset: 80 * index,
    index,
  })}
  
  // 2. Batasi jumlah item di luar viewport yang disimpan dalam memori
  windowSize={5} // default 21 (terlalu boros)
  
  // 3. Batasi jumlah item baru yang dirender per batch per frame
  maxToRenderPerBatch={10}
  
  // 4. Jumlah item awal yang dirender saat pertama kali buka
  initialNumToRender={10}
  
  removeClippedSubviews={true}
/>

Jika performa ekstrem tetap diperlukan, migrasikan ke library @shopify/flash-list yang mendaur ulang komponen tampilan (view recycling) mirip dengan RecyclerView native di Android.