FlatList: Was es ist, API und Optimierung in React Native

Was ist FlatList?

FlatList ist eine React Native-Komponente, die eine virtualisierte Liste mit leistungsstarkem Rendering großer Datenmengen implementiert. Die Komponente ist auf VirtualizedList aufgebaut und bietet eine deklarative API zum Erstellen flacher Listen beliebiger Komplexität.

FlatList wurde in React Native 0.43 als Ersatz für die veraltete ListView eingeführt. Laut Meta (2026) wird FlatList in 85% der React Native-Anwendungen verwendet, die mit Listen arbeiten. Die Komponente unterstützt alle gängigen Szenarien: Kontakte, Nachrichtenfeeds, Produktkataloge und Chats.

Geschichte und Platz im Ökosystem

Vor FlatList verwendeten Entwickler ListView, das eine manuelle Konfiguration der Wiederverwendung von Zellen erforderte. FlatList automatisierte diesen Prozess durch die Implementierung von Fenster-Rendering ähnlich wie RecyclerView in Android (2014) und UICollectionView in iOS (2012). In modernen Projekten ist FlatList der De-facto-Standard für jede Liste.

Wie FlatList-Virtualisierung funktioniert

FlatList-Virtualisierung ist ein Mechanismus, bei dem die Komponente nur die Elemente rendert, die in den sichtbaren Bildschirmbereich fallen, plus einen kleinen Puffer auf jeder Seite. Die restlichen Elemente werden nicht im DOM erstellt, was Speicher spart und das Rendern beschleunigt.

Beim Scrollen verwendet FlatList bereits erstellte View-Zellen wieder, indem es deren Daten ersetzt. Dadurch wird verhindert, dass für eine Liste mit 10.000 Elementen Tausende von Views erstellt werden. Die Standard-Puffergröße beträgt 10 Elemente über und unter dem sichtbaren Bereich, ist aber über windowSize konfigurierbar.

Die optimale Konfiguration dieser Parameter ermöglicht eine Balance zwischen Scroll-Glätte und Speicherverbrauch. Für Listen mit großen Elementen wird empfohlen, windowSize auf 5-7 zu reduzieren.

FlatList-API und wichtigste Props

FlatList-API umfasst eine Reihe von Props zur Konfiguration der Listendarstellung und des Verhaltens. Die beiden erforderlichen Props sind data (Daten-Array) und renderItem (Element-Rendering-Funktion). keyExtractor verbessert die Leistung, indem es einen eindeutigen Schlüssel für jedes Element bereitstellt.

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 fügt einen Trenner zwischen Elementen hinzu, ListHeaderComponent und ListFooterComponent fügen Kopf- und Fußzeile zur Liste hinzu. Dies ermöglicht komplexe Layouts ohne zusätzliche Wrapper.

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

FlatList-Leistungsoptimierung

FlatList-Optimierung ist für Anwendungen mit Hunderten und Tausenden von Elementen entscheidend. Ohne richtige Konfiguration kann die Liste beim Scrollen träge werden, übermäßig Speicher verbrauchen und auf schwachen Geräten abstürzen.

Die erste Regel ist die Verwendung von keyExtractor mit eindeutigen und stabilen Identifikatoren. Die Verwendung von Indizes als Schlüssel führt zu falscher Zellenwiederverwendung und Zustandsfehlern. Die zweite Regel ist, renderItem in useCallback zu wrappen und React.memo für die Elementkomponente zu verwenden.

getItemLayout für feste Höhe

Wenn alle Elemente dieselbe Höhe haben, ermöglicht getItemLayout FlatList, die Scrollposition ohne Messung von Komponenten zu berechnen. Dies bringt einen erheblichen Leistungsschub, besonders beim Scrollen zu einem bestimmten 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 Daten verhindert unnötige Neuerenderungen. Wenn Daten von einer API kommen, transformieren Sie sie einmal und cachen Sie sie. Verwenden Sie React.memo für die Elementkomponente, um das Rendern unveränderter Elemente zu vermeiden.

Horizontale Listen und Karussells

Horizontaler FlatList wird durch Hinzufügen der Prop horizontal={true} erstellt. Die Liste ändert die Scrollrichtung auf die X-Achse, was für Produktkarussells, Bildergalerien und horizontale Menüs praktisch ist.

Im horizontalen Modus ist es wichtig, snapToInterval und snapToAlignment für schrittweises Scrollen wie bei nativen Karussells richtig zu konfigurieren. Die Komponente verarbeitet automatisch Momentum und Fingerheben und stoppt am nächsten 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 ist ein Callback, der bei Änderung sichtbarer Elemente ausgelöst wird. Es wird für Analysen, Lazy Loading von Bildern und Aktivierung von Videos nur für sichtbare Karten verwendet.

Pull-to-Refresh und unendliches Scrollen

Pull-to-Refresh wird in FlatList über die Props refreshing und onRefresh implementiert, die mit einem Ladestatus zusammenarbeiten. Beim Herunterziehen der Liste wird onRefresh aufgerufen, und das refreshing-Flag blockiert wiederholte Aufrufe.

Unendliches Scrollen wird über onEndReached konfiguriert — einen Callback, der beim Annähern an das Ende der Liste ausgelöst wird. onEndReachedThreshold bestimmt, wie viele Elemente vor dem Ende das Ereignis auslöst. Üblicherweise wird cursor-basierte Paginierung verwendet.

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}
    />
  );
};

Wichtig: onEndReached kann mehrfach aufgerufen werden. Fügen Sie ein isLoading-Flag hinzu, um wiederholte Anfragen zu blockieren, bis die vorherige abgeschlossen ist. Verwenden Sie ActivityIndicator in ListFooterComponent zur Anzeige des Ladens.