Hur renderar du listor med FlatList?

Question

Accepted Answer

**FlatList** är React Natives komponent för effektiv rendering av **scrollbara datalistor**. Den renderar objekt **trägt** (bara det som är synligt), vilket gör den prestanda för långa listor — mycket bättre än att mappa över data i en ScrollView. ## FlatList — effektiva listor ```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 tar **data**-arrayen, en **renderItem**-funktion (renderar varje objekt) och en **keyExtractor** (unika nycklar) — och renderar objekt effektivt. ## Varför FlatList (inte 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. ``` ## Användbara FlatList-funktioner ```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 ``` ## Varför det spelar roll Att förstå FlatList är väsentligt eftersom **visning av datalistor är ett nästan universellt behov** i appar, och FlatList är standardvägen för att göra det på ett prestanda-effektivt sätt i React Native — det är ett måste-kunna. Nästan varje app visar listor (flöden, meddelanden, sökresultat), och att göra det effektivt är viktigt. Nyckelinsikten är att **FlatList renderar objekt trägt** (bara det som är synligt, via virtualisering, återanvändning när du scrollar) — vilket gör den prestanda för långa listor, i motsats till det vanliga misstaget att använda en **ScrollView med `data.map()`** som renderar alla objekt på en gång (även de utanför skärmen), vilket orsakar långsamhet och minnesproblem för långa listor. Att förstå att **använda FlatList för alla icke-triviala listor** (och ScrollView endast för små, fast innehål) är viktig praktisk kunskap som förhindrar verkliga prestandaproblem. Att förstå grundläggande användning (arrayen `data`, funktionen `renderItem` och `keyExtractor` för unika nycklar) är nödvändigt för att rendera listor. Att förstå **användbara funktioner** — `onEndReached` (för oändlig scroll/pagination, ladda mer data nära slutet — ett mycket vanligt behov), pull-to-refresh, header/footer/separator-komponenter, grid- och horisontella layouter, och SectionList för grupperade listor — täcker de vanliga listkraven appar har. Eftersom visning av listor effektivt är ett nästan universellt appkrav och FlatList (med sin träg rendering/virtualisering) är standard för prestanda i React Native — mycket bättre än det naiva ScrollView+map-tillvägagångssättet — är förståelse för FlatList väsentlig, ofta använd React Native-kunskap — en kärnkomponent som används i nästan varje app för att visa datalistor, där förståelse för dess effektiva träg rendering och funktioner (som oändlig scroll och pull-to-refresh) är grundläggande för att bygga prestanda-effektiva, funktionella listor, en standardfärdighet för React Native-utveckling.