FlatList: τι είναι, API και βελτιστοποίηση στο React Native

Τι είναι το FlatList;

FlatList — ένα στοιχείο React Native που υλοποιεί μια εικονικοποιημένη λίστα με αποδοτική απόδοση μεγάλου όγκου δεδομένων. Το στοιχείο είναι χτισμένο πάνω στο VirtualizedList και παρέχει ένα δηλωτικό API για τη δημιουργία επίπεδων λιστών οποιασδήποτε πολυπλοκότητας.

Το FlatList εμφανίστηκε στο React Native 0.43 ως αντικατάσταση του ξεπερασμένου ListView. Σύμφωνα με δεδομένα της Meta (2026), το FlatList χρησιμοποιείται στο 85% των εφαρμογών React Native που εργάζονται με λίστες. Το στοιχείο υποστηρίζει όλα τα κοινά σενάρια: επαφές, ροές ειδήσεων, κατάλογοι προϊόντων, συνομιλίες.

Ιστορία και θέση στο οικοσύστημα

Πριν από την εμφάνιση του FlatList, οι προγραμματιστές χρησιμοποιούσαν το ListView, το οποίο απαιτούσε χειροκίνητη διαμόρφωση επαναχρησιμοποίησης κελιών. Το FlatList αυτοματοποίησε αυτή τη διαδικασία, εισάγοντας παραθυρική απόδοση παρόμοια με το RecyclerView στο Android (2014) και το UICollectionView στο iOS (2012). Σε σύγχρονα έργα, το FlatList είναι το de facto πρότυπο για όλες τις λίστες.

Πώς λειτουργεί η εικονικοποίηση του FlatList

Εικονικοποίηση FlatList — ο μηχανισμός κατά τον οποίο το στοιχείο αποδίδει μόνο τα στοιχεία που βρίσκονται στην ορατή περιοχή της οθόνης, συν ένα μικρό buffer σε κάθε πλευρά. Τα υπόλοιπα στοιχεία δεν δημιουργούνται στο DOM, εξοικονομώντας μνήμη και επιταχύνοντας την απόδοση.

Κατά την κύλιση, το FlatList επαναχρησιμοποιεί ήδη δημιουργημένα κελιά View, αντικαθιστώντας τα δεδομένα σε αυτά. Αυτό αποτρέπει τη δημιουργία χιλιάδων View για μια λίστα 10.000 στοιχείων. Το προεπιλεγμένο μέγεθος buffer είναι 10 στοιχεία πάνω και κάτω από την ορατή περιοχή, αλλά μπορεί να διαμορφωθεί μέσω του windowSize.

Η βέλτιστη διαμόρφωση αυτών των παραμέτρων επιτρέπει την εξισορρόπηση μεταξύ ομαλότητας κύλισης και κατανάλωσης μνήμης. Για λίστες με μεγάλα στοιχεία, συνιστάται η μείωση του windowSize σε 5-7.

API και κύριες ιδιότητες του FlatList

API FlatList περιλαμβάνει ένα σύνολο ιδιοτήτων για τη διαμόρφωση της εμφάνισης και της συμπεριφοράς της λίστας. Δύο υποχρεωτικές ιδιότητες — data (πίνακας δεδομένων) και renderItem (συνάρτηση απόδοσης στοιχείου). Το keyExtractor αυξάνει την απόδοση παρέχοντας ένα μοναδικό κλειδί για κάθε στοιχείο.

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 προσθέτει διαχωριστικό μεταξύ στοιχείων, ListHeaderComponent και ListFooterComponent — κεφαλίδα και υποσέλιδο της λίστας. Αυτό επιτρέπει τη δημιουργία σύνθετων διατάξεων χωρίς επιπλέον περιτύλιγμα.

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

Βελτιστοποίηση απόδοσης του FlatList

Βελτιστοποίηση FlatList είναι κρίσιμη για εφαρμογές με εκατοντάδες και χιλιάδες στοιχεία. Χωρίς σωστή διαμόρφωση, η λίστα μπορεί να επιβραδυνθεί κατά την κύλιση, να καταναλώσει υπερβολική μνήμη και να προκαλέσει σφάλματα σε αδύναμες συσκευές.

Πρώτος κανόνας — χρησιμοποιήστε keyExtractor με μοναδικά και σταθερά αναγνωριστικά. Οι δείκτες ως κλειδιά οδηγούν σε εσφαλμένη επαναχρησιμοποίηση κελιών και σφάλματα κατάστασης. Δεύτερος — τυλίξτε το renderItem σε useCallback και χρησιμοποιήστε React.memo για το στοιχείο του στοιχείου.

getItemLayout για σταθερό ύψος

Εάν όλα τα στοιχεία έχουν το ίδιο ύψος, το getItemLayout επιτρέπει στο FlatList να υπολογίζει τη θέση κύλισης χωρίς μέτρηση στοιχείων. Αυτό δίνει σημαντική αύξηση απόδοσης, ειδικά κατά την κύλιση σε συγκεκριμένο δείκτη.

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 για δεδομένα αποτρέπει περιττές επαναποδόσεις. Εάν τα δεδομένα προέρχονται από API, μετατρέψτε τα μία φορά και αποθηκεύστε τα στην προσωρινή μνήμη. Χρησιμοποιήστε React.memo για το στοιχείο του στοιχείου για να αποφύγετε την απόδοση αμετάβλητων στοιχείων.

Οριζόντιες λίστες και καρουζέλ

Οριζόντιο FlatList δημιουργείται προσθέτοντας την ιδιότητα horizontal={true}. Η λίστα αλλάζει την κατεύθυνση κύλισης στον άξονα X, κάτι που είναι βολικό για καρουζέλ προϊόντων, γκαλερί εικόνων και οριζόντια μενού.

Στην οριζόντια λειτουργία, είναι σημαντικό να διαμορφώσετε σωστά τα snapToInterval και snapToAlignment για σταδιακή κύλιση, όπως στα εγγενή καρουζέλ. Το στοιχείο διαχειρίζεται αυτόματα την ορμή και την απελευθέρωση του δακτύλου, σταματώντας στο πλησιέστερο στοιχείο.

<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 που καλείται όταν αλλάζουν τα ορατά στοιχεία. Χρησιμοποιείται για αναλυτικά στοιχεία, τεμπέλικη φόρτωση εικόνων και ενεργοποίηση βίντεο μόνο για ορατές κάρτες.

Pull-to-refresh και ατελείωτη φόρτωση

Pull-to-refresh στο FlatList υλοποιείται μέσω των ιδιοτήτων refreshing και onRefresh, που λειτουργούν μαζί με την κατάσταση φόρτωσης. Όταν η λίστα τραβιέται προς τα κάτω, καλείται το onRefresh, και η σημαία refreshing αποκλείει επαναλαμβανόμενες κλήσεις.

Ατελείωτη φόρτωση (infinite scroll) διαμορφώνεται μέσω του onEndReached — callback που ενεργοποιείται όταν πλησιάζει το τέλος της λίστας. Το onEndReachedThreshold καθορίζει πόσα στοιχεία πριν από το τέλος ενεργοποιούν το συμβάν. Για σελιδοποίηση συνήθως χρησιμοποιείται η προσέγγιση 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}
    />
  );
};

Σημαντικό: το onEndReached μπορεί να κληθεί πολλές φορές. Προσθέστε μια σημαία isLoading για να αποκλείετε επαναλαμβανόμενα αιτήματα μέχρι να ολοκληρωθεί το προηγούμενο. Χρησιμοποιήστε ActivityIndicator στο ListFooterComponent για ένδειξη φόρτωσης.