Tujuan Pembelajaran

Memahami perbedaan ScrollView, FlatList, dan SectionList
Mampu mengimplementasikan infinite scroll dan pull-to-refresh
Mengerti optimasi performa untuk list dengan ribuan item

Analogi

Diagram


      ScrollView = Naik tangga (lambat, semua dilalui)
FlatList = Naik lift (cepat, hanya yang di depan mata)
SectionList = Lift dengan pemberhentian per lantai (kategori)

ScrollView render SEMUA item sekaligus. FlatList lazy-render — hanya yang terlihat di layar. Untuk >20 item, selalu FlatList.

ScrollView seperti naik tangga — berat untuk banyak lantai. FlatList seperti lift — efisien, hanya berhenti di lantai yang perlu.

Penjelasan Konsep

ScrollView render SEMUA children sekaligus — ini fatal untuk list panjang. Bayangkan render 1000 View dengan ScrollView: semua 1000 View ada di memory, layout calculation lambat, scrolling janky.

FlatList: virtualized list — hanya render item yang visible di viewport (plus beberapa buffer). Saat scroll, item di luar viewport di-unmount dan yang baru di-mount. Dengan 10.000 item, FlatList hanya render ~20 item di memory.

Props kunci FlatList: (1) data: array datamu. (2) renderItem: function render setiap item. (3) keyExtractor: unique key per item — wajib untuk performa. (4) onEndReached: callback saat scroll mendekati akhir (infinite scroll). (5) refreshing + onRefresh: pull-to-refresh. (6) ItemSeparatorComponent: pemisah antar item. (7) ListEmptyComponent: tampilan saat list kosong. (8) getItemLayout: fixed height untuk skip measurement calculation — boost performa besar.

SectionList: FlatList dengan grouping. Seperti daftar kontak di phone app — header per huruf. Props tambahan: sections (array of { title, data }), renderSectionHeader.

Performa optimasi: (1) React.memo untuk renderItem component. (2) getItemLayout kalau tinggi item fixed. (3) windowSize untuk kontrol buffer. (4) maxToRenderPerBatch.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami perbedaan ScrollView, FlatList, dan SectionList., mampu mengimplementasikan infinite scroll dan pull-to-refresh., dan mengerti optimasi performa untuk list dengan ribuan item. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca List & Scroll Performance, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

ScrollView seperti naik tangga — berat untuk banyak lantai. FlatList seperti lift — efisien, hanya berhenti di lantai yang perlu. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. getItemLayout kalau item height fixed — hemat 50% layout calculation. useCallback pada renderItem agar function tidak re-create setiap render.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { FlatList, Text, View, StyleSheet } from "react-native";
import { useCallback } from "react";

const DATA = Array.from({ length: 1000 }, (_, i) => ({ id: String(i), title: `Item ${i + 1}` }));

export default function BigList() {
  const renderItem = useCallback(({ item }: { item: { id: string; title: string } }) => (
    <View style={styles.item}><Text>{item.title}</Text></View>
  ), []);

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      getItemLayout={(_, index) => ({ length: 60, offset: 60 * index, index })}
      initialNumToRender={15}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
}

const styles = StyleSheet.create({ item: { height: 60, justifyContent: "center", paddingHorizontal: 16, borderBottomWidth: 1, borderColor: "#eee" } });

Penjelasan Kode

getItemLayout kalau item height fixed — hemat 50% layout calculation. useCallback pada renderItem agar function tidak re-create setiap render.

Prompt AI

Saya punya FlatList dengan 5000 item, tiap item render gambar dari URL. Scrolling lambat. Minta AI diagnosis penyebab dan berikan solusi optimasi.

Pertanyaan Reflektif

Coba buat FlatList dengan 500 item dan ScrollView dengan 500 item. Bandingkan performa scrolling. Berapa perbedaan memory usage dan FPS-nya?