FlatList: vad är det, API och optimering i React Native

Vad är FlatList?

FlatList — en React Native-komponent som implementerar en virtualiserad lista med prestandaeffektiv rendering av stora datamängder. Komponenten är byggd ovanpå VirtualizedList och tillhandahåller ett deklarativt API för att skapa platta listor av valfri komplexitet.

FlatList dök upp i React Native 0.43 som ersättning för den föråldrade ListView. Enligt Meta-data (2026) används FlatList i 85% av React Native-applikationer som arbetar med listor. Komponenten stöder alla vanliga scenarier: kontakter, nyhetsflöden, produktkataloger, chattar.

Historia och plats i ekosystemet

Före tillkomsten av FlatList använde utvecklare ListView, som krävde manuell konfiguration av cellåteranvändning. FlatList automatiserade denna process genom att införa fönsterbaserad rendering liknande RecyclerView i Android (2014) och UICollectionView i iOS (2012). I moderna projekt är FlatList de facto-standard för alla listor.

Hur fungerar FlatList-virtualisering

FlatList-virtualisering — mekanismen där komponenten endast renderar element som befinner sig i det synliga området på skärmen, plus en liten buffert på varje sida. Övriga element skapas inte i DOM, vilket sparar minne och påskyndar rendering.

Vid rullning återanvänder FlatList redan skapade View-celler genom att ersätta data i dem. Detta förhindrar skapandet av tusentals vyer för en lista med 10 000 element. Standardbuffertstorleken är 10 element ovanför och nedanför det synliga området, men kan konfigureras via windowSize.

Optimal konfiguration av dessa parametrar gör det möjligt att balansera mellan rullningsjämnhet och minnesförbrukning. För listor med stora element rekommenderas att minska windowSize till 5-7.

FlatList API och viktigaste props

FlatList API innehåller en uppsättning props för att konfigurera listans utseende och beteende. Två obligatoriska props — data (dataarray) och renderItem (renderingsfunktion för element). keyExtractor ökar prestandan genom att tillhandahålla en unik nyckel för varje element.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent lägger till en avskiljare mellan element, ListHeaderComponent och ListFooterComponent — listhuvud och listfot. Detta möjliggör skapandet av komplexa layouter utan extra omslag.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

Optimering av FlatList-prestanda

Optimering av FlatList är kritisk för applikationer med hundratals och tusentals element. Utan korrekt konfiguration kan listan bli långsam vid rullning, förbruka överdrivet minne och orsaka krascher på svagare enheter.

Första regeln — använd keyExtractor med unika och stabila identifierare. Index som nycklar leder till felaktig cellåteranvändning och tillståndsbuggar. Andra — slå in renderItem i useCallback och använd React.memo för elementkomponenten.

getItemLayout för fast höjd

Om alla element har samma höjd tillåter getItemLayout FlatList att beräkna rullningsposition utan att mäta komponenter. Detta ger en betydande prestandaökning, särskilt vid rullning till ett specifikt index.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo för data förhindrar onödiga omrenderingar. Om data kommer från API, transformera dem en gång och cachelagra. Använd React.memo för elementkomponenten för att undvika rendering av oförändrade element.

Horisontella listor och karuseller

Horisontell FlatList skapas genom att lägga till prop horizontal={true}. Listan ändrar rullningsriktning till X-axeln, vilket är bekvämt för produktkaruseller, bildgallerier och horisontella menyer.

I horisontellt läge är det viktigt att korrekt konfigurera snapToInterval och snapToAlignment för stegvis rullning, som i inbyggda karuseller. Komponenten hanterar automatiskt momentum och fingeravlyftning, och stannar vid närmaste element.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged — callback som anropas när synliga element ändras. Används för analys, lat laddning av bilder och aktivering av video endast för synliga kort.

Pull-to-refresh och oändlig laddning

Pull-to-refresh i FlatList implementeras via props refreshing och onRefresh, som arbetar tillsammans med laddningstillstånd. När listan dras nedåt anropas onRefresh, och flaggan refreshing blockerar upprepade anrop.

Oändlig laddning (infinite scroll) konfigureras via onEndReached — en callback som utlöses när slutet av listan närmar sig. onEndReachedThreshold bestämmer hur många element före slutet som utlöser händelsen. För paginering används vanligtvis cursor-baserad metod.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Viktigt: onEndReached kan anropas flera gånger. Lägg till en isLoading-flagga för att blockera upprepade förfrågningar tills den föregående är klar. Använd ActivityIndicator i ListFooterComponent för att indikera laddning.