Yaya kake yin fasali tare da FlatList?

Question

Accepted Answer

**FlatList** shine nau'i na React Native don yin fasali da kyau **jeri mai gundowa** na bayani. Yana yin abubuwan **jiyya** (kawai abin da ake gani), yana taimakawa a gida don jeri mai tsayi — sannu sosai fiye da zance akan bayani a ScrollView. ## FlatList — jeri mai kyau ```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 yana ɗaukar jeri na **data**, aikin **renderItem** (yin fasali kowane abin), da **keyExtractor** (makullin makulli) — kuma yana yin abubuwan jiyya. ## Me ya sa FlatList (ba 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. ``` ## Abubuwan FlatList da suka fi dacewa ```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 ``` ## Me ya sa yana da mahimmanci Tuntuni FlatList yana da mahimmanci domin **nuna jeri na bayani yana ɓuratacciyar buhari** a cikin aikace-aikace, kuma FlatList shine hanya daidai mai kyau don yin haka a React Native, don haka yana dace kuma lallai a sani. Kusan kowane aikace yana nuna jeri (jerin abubuwa, saƙoƙi, sakamakon bincike), kuma yin hakan da kyau yana da mahimmanci. Mahallin gaskiya shine cewa **FlatList yana yin abubuwan jiyya** (kawai abin da ake gani, ta hanyar virtualization, yin jiyya yayin wajen zuwa) — yana taimakawa a gida don jeri mai tsayi, sabanin kuskure na gida na amfani da **ScrollView tare da `data.map()`** wanda ke yin duk abubuwan lokaci gida (ko da a waje), yana haifar da tardawa da matsaloli na ƙarfin ajiya a cikin jeri mai tsayi. \