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 је дефакто стандард за све листе.

Како функционише виртуелизација FlatList

Виртуелизација FlatList — механизам у ком компонент рендерује само елементе који се налазе у видљивом делу екрана, плус мали бафер са сваке стране. Остали елементи се не креирају у DOM-у, што штеди меморију и убрзава рендеровање.

При скроловању, FlatList поново користи већ креиране View ћелије, замењујући податке у њима. Ово спречава креирање хиљада View-ова за листу од 10 000 елемената. Подразумевана величина бафера је 10 елемената изнад и испод видљивог подручја, али се може подесити преко windowSize.

Оптимално подешавање ових параметара омогућава балансирање између глаткоће скроловања и потрошње меморије. За листе са великим елементима препоручује се смањење windowSize на 5-7.

API и главни пропсови FlatList

FlatList API укључује скуп пропсова за подешавање изгледа и понашања листе. Два обавезна пропса — 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 за приказ учитавања.