Paano mo ire-render ang mga listahan gamit ang FlatList?

Question

Accepted Answer

**FlatList** ay ang component ng React Native para sa episyenteng pag-render ng **scrollable lists** ng data. Ini-render nito ang mga item **nang maaga** (tanging ang nakikita), na ginagawang mabisa para sa mahabang listahan — higit na mahusay kaysa mag-map sa data sa ScrollView. ## FlatList — episyenteng mga listahan ```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} )} /> ); } ``` Ang FlatList ay kumukuha ng **data** array, isang **renderItem** function (pag-render ng bawat item), at isang **keyExtractor** (natatanging keys) — at ine-render ang mga item nang epesyente. ## Bakit FlatList (hindi 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. ``` ## Kapaki-pakinabang na mga feature ng FlatList ```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 ``` ## Bakit ito mahalaga Ang pag-unawa sa FlatList ay mahalaga dahil ang **pagpapakita ng mga listahan ng data ay isang halos pandaigdigang pangangailangan** sa mga app, at ang FlatList ay ang standard, mabisang paraan upang gawin ito sa React Native, kaya ito ay kailangang-kailangan na kaalaman. Ang halos bawat app ay nagpapakita ng mga listahan (feeds, mensahe, resulta ng paghahanap), at ang paggawa nito nang epesyente ay mahalaga. Ang pangunahing insight ay ang **FlatList ay nag-render ng mga item nang maaga** (tanging ang nakikita, sa pamamagitan ng virtualization, recycling habang gumagalaw ka) — na ginagawang mabisa para sa mahabang listahan, sa kaibahan sa karaniwang pagkakamali ng paggamit ng **ScrollView na may `data.map()`** na nag-render ng lahat ng mga item nang sabay-sabay (kahit off-screen), na nagdudulot ng pagbagal at problema sa memorya para sa mahabang mga listahan. Ang pag-unawa na **gumamit ng FlatList para sa anumang non-trivial list** (at ScrollView lamang para sa maliit, nakapirming content) ay mahalaga praktikal na kaalaman na pumipigil sa tunay na mga isyu sa performance. Ang pag-unawa sa pangunahing paggamit (ang `data` array, `renderItem` function, at `keyExtractor` para sa natatanging keys) ay kinakailangan para sa pag-render ng mga listahan. Ang pag-unawa sa **kapaki-pakinabang na mga feature** — `onEndReached` (para sa infinite scroll/pagination, pag-load ng higit pang data malapit sa dulo — isang napakalakas na pangangailangan), pull-to-refresh, header/footer/separator components, grid at pahalang na mga layout, at SectionList para sa grouped lists — sumasaklaw sa karaniwang pangangailangan ng mga listahan na mayroon ang mga app. Dahil ang pagpapakita ng mga listahan nang epesyente ay isang halos pandaigdigang pangangailangan ng app at ang FlatList (na may lazy rendering/virtualization) ay ang standard, mabisang React Native solution — higit na mahusay kaysa sa naive ScrollView+map approach — ang pag-unawa sa FlatList ay mahalaga, madalas na ginagamit na React Native knowledge — isang core component na ginagamit sa halos bawat app upang ipakita ang mga listahan ng data, kung saan ang pag-unawa sa epesyenteng maagap na pag-render at mga feature nito (tulad ng infinite scroll at pull-to-refresh) ay pangunahing-panguna sa pagbuo ng mabisang, functional na mga listahan, isang standard na kasanayan para sa React Native development.