FlatList: nədir, API və React Native-də optimallaşdırma

FlatList nədir?

FlatList — böyük həcmli məlumatların məhsuldar renderinqi ilə virtualizasiya olunmuş siyahını həyata keçirən React Native komponentidir. Komponent VirtualizedList üzərində qurulub və istənilən mürəkkəblikdə düz siyahılar yaratmaq üçün deklarativ API təqdim edir.

FlatList React Native 0.43-də köhnəlmiş ListView-in əvəzi olaraq ortaya çıxdı. Meta məlumatlarına görə (2026), FlatList siyahılarla işləyən React Native tətbiqlərinin 85%-də istifadə olunur. Komponent bütün geniş yayılmış ssenariləri dəstəkləyir: kontaktlar, xəbər lentləri, məhsul kataloqları, çatlar.

Tarix və ekosistemdə yeri

FlatList-in yaranmasından əvvəl tərtibatçılar hüceyrələrin təkrar istifadəsini əl ilə konfiqurasiya etməyi tələb edən ListView-dən istifadə edirdilər. FlatList bu prosesi avtomatlaşdırdı, Android-də RecyclerView (2014) və iOS-da UICollectionView (2012) analoqu ilə pəncərəli renderinqi tətbiq etdi. Müasir layihələrdə FlatList hər hansı siyahılar üçün de-fakto standartdır.

FlatList virtualizasiyası necə işləyir

FlatList virtualizasiyası — komponentin yalnız ekranın görünən sahəsinə düşən elementləri, üstəgəl hər tərəfdən kiçik buferi render etdiyi mexanizmdir. Qalan elementlər DOM-da yaradılmır, bu da yaddaşa qənaət edir və renderinqi sürətləndirir.

Sürüşdürmə zamanı FlatList artıq yaradılmış View hüceyrələrini təkrar istifadə edir, onlardakı məlumatları əvəz edir. Bu, 10 000 elementli siyahı üçün minlərlə View-in yaradılmasının qarşısını alır. Standart bufer ölçüsü görünən sahədən yuxarı və aşağı 10 elementdir, lakin windowSize vasitəsilə konfiqurasiya edilə bilər.

Bu parametrlərin optimal konfiqurasiyası sürüşdürmənin hamarlığı ilə yaddaş istehlakı arasında balans yaratmağa imkan verir. Böyük elementli siyahılar üçün windowSize-i 5-7-yə endirmək tövsiyə olunur.

FlatList API və əsas proplar

FlatList API-si siyahının görünüşünü və davranışını konfiqurasiya etmək üçün proplar dəstini əhatə edir. İki məcburi prop — data (məlumat massivi) və renderItem (elementin render funksiyası). keyExtractor hər element üçün unikal açar təqdim etməklə performansı artırır.

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 elementlər arasında ayırıcı əlavə edir, ListHeaderComponent və ListFooterComponent — siyahının başlığı və altlığı. Bu, əlavə sarğı olmadan mürəkkəb maketlər yaratmağa imkan verir.

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

FlatList performansının optimallaşdırılması

FlatList optimallaşdırılması yüzlərlə və minlərlə elementi olan tətbiqlər üçün kritik əhəmiyyət daşıyır. Düzgün konfiqurasiya olmadan siyahı sürüşdürmə zamanı ləngiyə bilər, həddindən artıq yaddaş sərf edə bilər və zəif cihazlarda çökə bilər.

Birinci qayda — unikal və sabit identifikatorlarla keyExtractor istifadə etməkdir. İndekslərin açar kimi istifadəsi hüceyrələrin səhv təkrar istifadəsinə və vəziyyət xətalarına səbəb olur. İkincisi — renderItem-i useCallback-ə bükmək və element komponenti üçün React.memo istifadə etməkdir.

Sabit hündürlük üçün getItemLayout

Bütün elementlər eyni hündürlüyə malikdirsə, getItemLayout FlatList-ə komponentləri ölçmədən sürüşdürmə mövqeyini hesablamağa imkan verir. Bu, xüsusilə müəyyən indeksə sürüşdürmə zamanı əhəmiyyətli performans artımı verir.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

Məlumatlar üçün useMemo lazımsız təkrar renderlərin qarşısını alır. Məlumatlar API-dən gəlirsə, onları bir dəfə çevirin və keşləyin. Element komponenti üçün React.memo istifadə edərək dəyişməmiş elementlərin render edilməsinin qarşısını alın.

Üfüqi siyahılar və karusellər

Üfüqi FlatList horizontal={true} propunun əlavə edilməsi ilə yaradılır. Siyahı sürüşdürmə istiqamətini X oxuna dəyişir, bu da məhsul karuselləri, şəkil qalereyaları və üfüqi menyular üçün əlverişlidir.

Üfüqi rejimdə addımlı sürüşdürmə üçün snapToInterval və snapToAlignment-i düzgün konfiqurasiya etmək vacibdir, necə ki nativ karusellərdə olur. Komponent avtomatik olaraq təcil və barmağın buraxılmasını idarə edir, ən yaxın elementdə dayanır.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged — görünən elementlər dəyişdikdə çağırılan callback. Analitika, şəkillərin gec yüklənməsi və yalnız görünən kartlar üçün videonun aktivləşdirilməsi üçün istifadə olunur.

Pull-to-refresh və sonsuz yükləmə

Pull-to-refresh FlatList-də refreshing və onRefresh propları vasitəsilə həyata keçirilir, yükləmə vəziyyəti ilə birlikdə işləyir. Siyahını aşağı çəkərkən onRefresh çağırılır, refreshing flagı isə təkrar çağırışları bloklayır.

Sonsuz yükləmə (infinite scroll) onEndReached vasitəsilə konfiqurasiya edilir — siyahının sonuna yaxınlaşdıqda işə düşən callback. onEndReachedThreshold hadisənin işə düşməsi üçün sondan neçə element qaldığını müəyyən edir. Paginasiya üçün adətən cursor-based yanaşma istifadə olunur.

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

Vacib: onEndReached dəfələrlə çağırıla bilər. Əvvəlki sorğu bitməyənə qədər təkrar sorğuları bloklamaq üçün isLoading flagı əlavə edin. Yükləməni göstərmək üçün ListFooterComponent-də ActivityIndicator istifadə edin.