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 — колбек, що викликається при зміні видимих елементів. Використовується для аналітики, лінивого завантаження зображень та активації відео лише для видимих карток.

Pull-to-refresh і нескінченне завантаження

Pull-to-refresh у FlatList реалізується через пропси refreshing та onRefresh, що працюють у парі зі станом завантаження. При потягуванні списку вниз викликається onRefresh, а прапорець refreshing блокує повторні виклики.

Нескінченне завантаження налаштовується через onEndReached — колбек, що спрацьовує при наближенні до кінця списку. 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 для індикації завантаження.