FlatList: ano ito, API at pag-optimize sa React Native

Ano ang FlatList?

FlatList — isang bahagi ng React Native na nagpapatupad ng naka-virtualize na listahan na may mahusay na pag-render ng malalaking dami ng data. Ang bahagi ay binuo sa ibabaw ng VirtualizedList at nagbibigay ng deklaratibong API para sa paglikha ng mga flat na listahan ng anumang pagiging kumplikado.

Ang FlatList ay lumitaw sa React Native 0.43 bilang kapalit ng lumang ListView. Ayon sa data ng Meta (2026), ang FlatList ay ginagamit sa 85% ng mga application ng React Native na nagtatrabaho sa mga listahan. Sinusuportahan ng bahagi ang lahat ng karaniwang sitwasyon: mga contact, news feed, katalogo ng produkto, chat.

Kasaysayan at lugar sa ecosystem

Bago ang pagdating ng FlatList, ang mga developer ay gumagamit ng ListView na nangangailangan ng manu-manong pag-configure ng muling paggamit ng cell. Awtomatiko ng FlatList ang prosesong ito sa pamamagitan ng pagpapakilala ng windowing rendering katulad ng RecyclerView sa Android (2014) at UICollectionView sa iOS (2012). Sa mga modernong proyekto, ang FlatList ay ang de facto na pamantayan para sa lahat ng listahan.

Paano gumagana ang virtualization ng FlatList

Virtualization ng FlatList — mekanismo kung saan ang bahagi ay nagre-render lamang ng mga elemento na nasa nakikitang lugar ng screen, kasama ang maliit na buffer sa bawat panig. Ang natitirang mga elemento ay hindi nililikha sa DOM, nakakatipid ng memorya at nagpapabilis ng pag-render.

Sa pag-scroll, muling ginagamit ng FlatList ang mga nagawa nang View cell sa pamamagitan ng pagpapalit ng data sa loob ng mga ito. Pinipigilan nito ang paglikha ng libu-libong View para sa isang listahan ng 10,000 elemento. Ang default na laki ng buffer ay 10 elemento sa itaas at ibaba ng nakikitang lugar, ngunit maaaring i-configure sa pamamagitan ng windowSize.

Ang pinakamainam na pag-configure ng mga parameter na ito ay nagbibigay-daan sa pagbalanse sa pagitan ng kinis ng pag-scroll at paggamit ng memorya. Para sa mga listahan na may malalaking elemento, inirerekomenda na bawasan ang windowSize sa 5-7.

API at pangunahing props ng FlatList

FlatList API ay may kasamang hanay ng mga props para sa pag-configure ng hitsura at pag-uugali ng listahan. Dalawang mandatoryong props — data (array ng data) at renderItem (function ng pag-render ng elemento). Pinapataas ng keyExtractor ang pagganap sa pamamagitan ng pagbibigay ng natatanging susi para sa bawat 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 ay nagdaragdag ng separator sa pagitan ng mga elemento, ListHeaderComponent at ListFooterComponent — header at footer ng listahan. Ito ay nagbibigay-daan sa paglikha ng mga kumplikadong layout nang walang karagdagang wrapper.

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

Pag-optimize ng pagganap ng FlatList

Pag-optimize ng FlatList ay kritikal para sa mga application na may daan-daan at libu-libong elemento. Kung walang tamang pag-configure, ang listahan ay maaaring bumagal sa pag-scroll, kumonsumo ng labis na memorya at magdulot ng pag-crash sa mahihinang device.

Unang panuntunan — gumamit ng keyExtractor na may natatangi at matatag na mga identifier. Ang mga index bilang mga susi ay humahantong sa maling muling paggamit ng cell at mga bug sa estado. Pangalawa — balutin ang renderItem sa useCallback at gamitin ang React.memo para sa bahagi ng elemento.

getItemLayout para sa nakapirming taas

Kung ang lahat ng elemento ay may parehong taas, pinapayagan ng getItemLayout ang FlatList na kalkulahin ang posisyon ng pag-scroll nang hindi sinusukat ang mga bahagi. Ito ay nagbibigay ng makabuluhang pagtaas sa pagganap, lalo na kapag nag-i-scroll sa isang partikular na 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 para sa data ay pumipigil sa mga hindi kinakailangang re-render. Kung ang data ay nagmula sa API, baguhin ito nang isang beses at i-cache. Gamitin ang React.memo para sa bahagi ng elemento upang maiwasan ang pag-render ng mga hindi nabagong elemento.

Pahalang na mga listahan at carousel

Pahalang na FlatList ay nilikha sa pamamagitan ng pagdaragdag ng prop na horizontal={true}. Binabago ng listahan ang direksyon ng pag-scroll sa X axis, na maginhawa para sa mga carousel ng produkto, gallery ng larawan at pahalang na menu.

Sa pahalang na mode, mahalaga na i-configure nang tama ang snapToInterval at snapToAlignment para sa sunud-sunod na pag-scroll, tulad ng sa native na mga carousel. Awtomatikong pinangangasiwaan ng bahagi ang momentum at pagbitaw ng daliri, humihinto sa pinakamalapit na elemento.

<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 na tinatawag kapag nagbago ang mga nakikitang elemento. Ginagamit para sa analytics, lazy loading ng mga larawan at pag-activate ng video para lamang sa mga nakikitang card.

Pull-to-refresh at walang katapusang pag-load

Pull-to-refresh sa FlatList ay ipinapatupad sa pamamagitan ng props na refreshing at onRefresh, na nagtutulungan sa estado ng pag-load. Kapag hinila ang listahan pababa, ang onRefresh ay tinatawag, at ang refreshing flag ay humaharang sa mga paulit-ulit na tawag.

Walang katapusang pag-load (infinite scroll) ay naka-configure sa pamamagitan ng onEndReached — callback na na-trigger kapag papalapit sa dulo ng listahan. Tinutukoy ng onEndReachedThreshold kung ilang elemento bago ang dulo ang magti-trigger ng kaganapan. Para sa pagination karaniwang ginagamit ang cursor-based approach.

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

Mahalaga: ang onEndReached ay maaaring tawagin nang maraming beses. Magdagdag ng isLoading flag para harangan ang mga paulit-ulit na kahilingan hanggang sa matapos ang nauna. Gamitin ang ActivityIndicator sa ListFooterComponent upang ipahiwatig ang pag-load.