Bagaimana Anda merender daftar dengan FlatList?

Question

Accepted Answer

**FlatList** adalah komponen React Native untuk merender **daftar data yang dapat di-scroll** secara efisien. Komponen ini merender item **secara lazy** (hanya yang terlihat), menjadikannya performan untuk daftar panjang — jauh lebih baik daripada memetakan data di dalam ScrollView. ## FlatList — daftar yang efisien ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList mengambil array **data**, fungsi **renderItem** (merender setiap item), dan **keyExtractor** (kunci unik) — dan merender item secara efisien. ## Mengapa FlatList (bukan ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Fitur FlatList yang berguna ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Mengapa ini penting Memahami FlatList sangat penting karena **menampilkan daftar data adalah kebutuhan yang hampir universal** dalam aplikasi, dan FlatList adalah cara standar yang performan untuk melakukannya di React Native, jadi ini adalah pengetahuan yang harus diketahui. Hampir setiap aplikasi menampilkan daftar (feed, pesan, hasil pencarian), dan melakukannya secara efisien adalah penting. Wawasan kuncinya adalah bahwa **FlatList merender item secara lazy** (hanya yang terlihat, melalui virtualisasi, mendaur ulang saat Anda scroll) — menjadikannya performan untuk daftar panjang, berlawanan dengan kesalahan umum menggunakan **ScrollView dengan `data.map()`** yang merender semua item sekaligus (bahkan di luar layar), menyebabkan kelambatan dan masalah memori untuk daftar panjang. Memahami untuk **menggunakan FlatList untuk daftar non-trivial apa pun** (dan ScrollView hanya untuk konten kecil dan tetap) adalah pengetahuan praktis penting yang mencegah masalah performa nyata. Memahami penggunaan dasar (array `data`, fungsi `renderItem`, dan `keyExtractor` untuk kunci unik) diperlukan untuk merender daftar. Memahami **fitur berguna** — `onEndReached` (untuk infinite scroll/pagination, memuat data lebih banyak di dekat akhir — kebutuhan yang sangat umum), pull-to-refresh, komponen header/footer/separator, tata letak grid dan horizontal, dan SectionList untuk daftar berkelompok — mencakup persyaratan daftar umum yang dimiliki aplikasi. Karena menampilkan daftar secara efisien adalah persyaratan aplikasi yang hampir universal dan FlatList (dengan lazy rendering/virtualisasi-nya) adalah solusi React Native standar yang performan — jauh lebih baik daripada pendekatan naif ScrollView+map — memahami FlatList adalah pengetahuan React Native yang penting dan sering diterapkan — komponen inti yang digunakan di hampir setiap aplikasi untuk menampilkan daftar data, di mana memahami lazy rendering yang efisien dan fitur-fiturnya (seperti infinite scroll dan pull-to-refresh) adalah fundamental untuk membangun daftar yang performan dan fungsional, keterampilan standar untuk pengembangan React Native.