FlatList ni component ya React Native kwa kuonyesha kwa ufanisi scrollable lists za data. Huonyesha items kwa lazima (kile kinachoonekana tu), ikiifanya yenye utendaji bora kwa lists ndefu — bora zaidi kuliko kumaap juu ya data katika ScrollView.
{ , , } ;
() {
(
);
}
FlatList huchukua array ya data, function ya renderItem (kuonyesha kila item), na keyExtractor (keys za kipekee) — na huonyesha items kwa ufanisi.
❌ 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.
✓ 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
Kuelewa FlatList ni muhimu kwa sababu kuonyesha lists za data ni hitaji la karibu la kila app, na FlatList ndiyo njia ya kawaida, yenye utendaji bora ya kufanya hivyo katika React Native, kwa hivyo ni maarifa ya lazima kujua.
Karibu kila app huonyesha lists (feeds, messages, search results), na kufanya hivyo kwa ufanisi ni muhimu.
Utambuzi muhimu ni kwamba FlatList huonyesha items kwa lazima (kile kinachoonekana tu, kupitia virtualization, ikitumia tena unaposcroll) — ikiifanya yenye utendaji bora kwa lists ndefu, tofauti na kosa la kawaida la kutumia ScrollView na data.map() ambalo huonyesha items zote mara moja (hata off-screen), likisababisha upole na matatizo ya memory kwa lists ndefu.
Kuelewa kutumia FlatList kwa list yoyote isiyo ndogo (na ScrollView tu kwa content ndogo, isiyobadilika) ni maarifa muhimu ya vitendo yanayozuia matatizo halisi ya utendaji.
Kuelewa matumizi ya msingi (array ya data, function ya renderItem, na keyExtractor kwa keys za kipekee) ni lazima kuonyesha lists.
Kuelewa vipengele muhimu — onEndReached (kwa infinite scroll/pagination, kupakia data zaidi karibu na mwisho — hitaji la kawaida sana), pull-to-refresh, header/footer/separator components, grid na horizontal layouts, na SectionList kwa grouped lists — hufunika mahitaji ya kawaida ya lists ambayo apps zina.
Kwa kuwa kuonyesha lists kwa ufanisi ni hitaji la karibu la kila app na FlatList (na lazy rendering/virtualization yake) ndiyo suluhisho la kawaida, lenye utendaji bora la React Native — bora zaidi kuliko mbinu ya kawaida ya ScrollView+map — kuelewa FlatList ni maarifa ya React Native yanayotumiwa mara kwa mara — component ya msingi inayotumiwa karibu kila app kuonyesha lists za data, ambapo kuelewa lazy rendering yake yenye ufanisi na vipengele (kama infinite scroll na pull-to-refresh) ni msingi wa kujenga lists zenye utendaji bora na zinazofanya kazi, ujuzi wa kawaida kwa maendeleo ya React Native.