FlatList: ce este, API și optimizare în React Native

Ce este FlatList?

FlatList — componenta React Native care implementează o listă virtualizată cu randarea performantă a volumelor mari de date. Componenta este construită pe baza VirtualizedList și oferă un API declarativ pentru crearea listelor plate de orice complexitate.

FlatList a apărut în React Native 0.43 ca înlocuitor pentru ListView învechit. Conform datelor Meta (2026), FlatList este utilizat în 85% din aplicațiile React Native care lucrează cu liste. Componenta suportă toate scenariile comune: contacte, fluxuri de știri, cataloage de produse, chat-uri.

Istorie și loc în ecosistem

Înainte de apariția FlatList, dezvoltatorii foloseau ListView, care necesita configurarea manuală a reutilizării celulelor. FlatList a automatizat acest proces, introducând randarea în fereastră similar cu RecyclerView în Android (2014) și UICollectionView în iOS (2012). În proiectele moderne, FlatList este standardul de facto pentru orice liste.

Cum funcționează virtualizarea FlatList

Virtualizarea FlatList — mecanismul prin care componenta rede doar elementele care se află în zona vizibilă a ecranului, plus un mic buffer de fiecare parte. Restul elementelor nu sunt create în DOM, economisind memorie și accelerând randarea.

La derulare, FlatList reutilizează celulele View deja create, înlocuind datele din ele. Acest lucru previne crearea a mii de View-uri pentru o listă de 10 000 de elemente. Dimensiunea implicită a buffer-ului este de 10 elemente deasupra și dedesubtul zonei vizibile, dar poate fi configurată prin windowSize.

Configurarea optimă a acestor parametri permite echilibrarea între fluența derulării și consumul de memorie. Pentru liste cu elemente mari, se recomandă reducerea windowSize la 5-7.

API și proprietățile principale FlatList

API FlatList include un set de proprietăți pentru configurarea aspectului și comportamentului listei. Două proprietăți obligatorii — data (matrice de date) și renderItem (funcția de randare a elementului). keyExtractor crește performanța furnizând o cheie unică pentru fiecare 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 adaugă un separator între elemente, ListHeaderComponent și ListFooterComponent — antetul și subsolul listei. Acest lucru permite crearea de layout-uri complexe fără înveliș suplimentar.

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

Optimizarea performanței FlatList

Optimizarea FlatList este critică pentru aplicațiile cu sute și mii de elemente. Fără o configurare corectă, lista poate încetini la derulare, poate consuma memorie excesivă și poate cauza crash-uri pe dispozitive slabe.

Prima regulă — utilizarea keyExtractor cu identificatori unici și stabili. Indexurile ca chei duc la reutilizarea incorectă a celulelor și erori de stare. A doua — înfășurarea renderItem în useCallback și utilizarea React.memo pentru componenta elementului.

getItemLayout pentru înălțime fixă

Dacă toate elementele au aceeași înălțime, getItemLayout permite FlatList să calculeze poziția de derulare fără măsurarea componentelor. Acest lucru oferă o creștere semnificativă a performanței, în special la derularea către un index specific.

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 pentru date previne re-randările inutile. Dacă datele vin de la API, transformați-le o dată și stocați-le în cache. Utilizați React.memo pentru componenta elementului pentru a evita randarea elementelor nemodificate.

Liste orizontale și carusele

FlatList orizontal se creează prin adăugarea proprietății horizontal={true}. Lista schimbă direcția de derulare pe axa X, ceea ce este convenabil pentru carusele de produse, galerii de imagini și meniuri orizontale.

În modul orizontal, este importantă configurarea corectă a snapToInterval și snapToAlignment pentru derularea pas cu pas, ca în caruselele native. Componenta gestionează automat impulsul și eliberarea degetului, oprindu-se la cel mai apropiat 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 apelat la schimbarea elementelor vizibile. Se utilizează pentru analitică, încărcarea lenesă a imaginilor și activarea video-ului doar pentru cardurile vizibile.

Pull-to-refresh și încărcare infinită

Pull-to-refresh în FlatList se implementează prin proprietățile refreshing și onRefresh, care lucrează împreună cu starea de încărcare. La tragerea listei în jos, se apelează onRefresh, iar flagul refreshing blochează apelurile repetate.

Încărcarea infinită (infinite scroll) se configurează prin onEndReached — callback declanșat la apropierea de sfârșitul listei. onEndReachedThreshold determină cu câte elemente înainte de sfârșit se declanșează evenimentul. Pentru paginare se folosește de obicei abordarea cursor-based.

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

Important: onEndReached poate fi apelat de mai multe ori. Adăugați un flag isLoading pentru a bloca solicitările repetate până la finalizarea celei anterioare. Utilizați ActivityIndicator în ListFooterComponent pentru a indica încărcarea.