FlatList: cos'è, API e ottimizzazione in React Native

Cos'è FlatList?

FlatList è un componente React Native che implementa una lista virtualizzata con rendering ad alte prestazioni per grandi insiemi di dati. Il componente è costruito su VirtualizedList e fornisce un'API dichiarativa per creare liste piatte di qualsiasi complessità.

FlatList è stato introdotto in React Native 0.43 come sostituto del deprecato ListView. Secondo Meta (2026), FlatList è utilizzato nell'85% delle applicazioni React Native che lavorano con liste. Il componente supporta tutti gli scenari comuni: contatti, feed di notizie, cataloghi di prodotti e chat.

Storia e posizione nell'ecosistema

Prima di FlatList, gli sviluppatori utilizzavano ListView, che richiedeva la configurazione manuale del riutilizzo delle celle. FlatList ha automatizzato questo processo implementando il rendering a finestre simile a RecyclerView in Android (2014) e UICollectionView in iOS (2012). Nei progetti moderni, FlatList è lo standard de facto per qualsiasi lista.

Come funziona la virtualizzazione di FlatList

La virtualizzazione di FlatList è un meccanismo in cui il componente renderizza solo gli elementi che rientrano nell'area visibile dello schermo, più un piccolo buffer su ciascun lato. Gli elementi rimanenti non vengono creati nel DOM, risparmiando memoria e accelerando il rendering.

Durante lo scorrimento, FlatList riutilizza le celle View già create, sostituendo i loro dati. Questo impedisce la creazione di migliaia di View per una lista di 10.000 elementi. La dimensione predefinita del buffer è di 10 elementi sopra e sotto l'area visibile, ma è configurabile tramite windowSize.

La configurazione ottimale di questi parametri consente di bilanciare la fluidità dello scorrimento e il consumo di memoria. Per liste con elementi grandi, si consiglia di ridurre windowSize a 5-7.

API e props principali di FlatList

L'API di FlatList include un insieme di props per configurare la visualizzazione e il comportamento della lista. Le due props obbligatorie sono data (array di dati) e renderItem (funzione di rendering degli elementi). keyExtractor migliora le prestazioni fornendo una chiave univoca per ogni elemento.

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 aggiunge un separatore tra gli elementi, ListHeaderComponent e ListFooterComponent aggiungono intestazione e piè di pagina alla lista. Ciò consente di creare layout complessi senza wrapper aggiuntivi.

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

Ottimizzazione delle prestazioni di FlatList

L'ottimizzazione di FlatList è fondamentale per applicazioni con centinaia e migliaia di elementi. Senza una corretta configurazione, la lista potrebbe rallentare durante lo scorrimento, consumare memoria eccessiva e causare arresti anomali su dispositivi di fascia bassa.

La prima regola è utilizzare keyExtractor con identificatori univoci e stabili. Usare gli indici come chiavi porta a un riutilizzo errato delle celle e a bug di stato. La seconda regola è avvolgere renderItem in useCallback e utilizzare React.memo per il componente dell'elemento.

getItemLayout per altezza fissa

Se tutti gli elementi hanno la stessa altezza, getItemLayout consente a FlatList di calcolare la posizione di scorrimento senza misurare i componenti. Ciò offre un significativo miglioramento delle prestazioni, soprattutto quando si scorre verso un indice specifico.

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 per i dati previene re-rendering non necessari. Se i dati provengono da un'API, trasformali una volta e mettili in cache. Usa React.memo per il componente dell'elemento per evitare il rendering di elementi invariati.

Liste orizzontali e caroselli

FlatList orizzontale si crea aggiungendo la prop horizontal={true}. La lista cambia la direzione di scorrimento sull'asse X, utile per caroselli di prodotti, gallerie di immagini e menu orizzontali.

In modalità orizzontale, è importante configurare correttamente snapToInterval e snapToAlignment per uno scorrimento passo passo come nei caroselli nativi. Il componente gestisce automaticamente lo slancio e il rilascio del dito, fermandosi sull'elemento più vicino.

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

onViewableItemsChanged è un callback attivato quando cambiano gli elementi visibili. Viene utilizzato per analisi, caricamento lento delle immagini e attivazione dei video solo per le carte visibili.

Pull-to-refresh e caricamento infinito

Pull-to-refresh in FlatList è implementato tramite le props refreshing e onRefresh, che lavorano insieme a uno stato di caricamento. Tirando la lista verso il basso, viene chiamato onRefresh, e il flag refreshing blocca le chiamate ripetute.

Il caricamento infinito si configura tramite onEndReached — un callback attivato quando ci si avvicina alla fine della lista. onEndReachedThreshold determina quanti elementi prima della fine viene attivato l'evento. Di solito si utilizza la paginazione basata su cursore.

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

Importante: onEndReached può essere chiamato più volte. Aggiungi un flag isLoading per bloccare le richieste ripetute fino al completamento della precedente. Usa ActivityIndicator in ListFooterComponent per indicare il caricamento.