FlatList ile listeleri nasıl render edersiniz?

Question

Accepted Answer

**FlatList**, React Native'in veri listelerini verimli bir şekilde render etmek için kullandığı bileşendir. Öğeleri **tembel** bir şekilde render eder (yalnızca görünenler), bu da uzun listeler için performanslı hale getirir — ScrollView'da veri eşlemesinden çok daha iyidir. ## FlatList — verimli listeler ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList, **data** dizisini, **renderItem** fonksiyonunu (her öğeyi render eder), ve **keyExtractor**'ı (benzersiz anahtarlar) alır — ve öğeleri verimli bir şekilde render eder. ## Neden FlatList (ScrollView + map değil) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Faydalı FlatList özellikleri ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Neden önemli FlatList'i anlamak önemlidir çünkü **veri listelerini göstermek uygulamalarda neredeyse evrensel bir ihtiyaçtır** ve FlatList, React Native'de bunu yapmanın standart, performanslı yoludur, bu nedenle bilmesi gereken bilgidir. Hemen hemen her uygulama listeleri gösterir (akışlar, mesajlar, arama sonuçları) ve bunu verimli bir şekilde yapmak önemlidir. Ana fikir şudur ki **FlatList öğeleri tembel render eder** (yalnızca görünenler, sanallaştırma yoluyla, kaydırırken geri dönüştürme) — bu da uzun listeler için performanslı hale getirir. Buna karşılık, **ScrollView ile `data.map()`** kullanmanın yaygın hatasında tüm öğeler bir kerede render edilir (ekran dışında olanlar bile), bu da uzun listeler için yavaşlık ve bellek sorunlarına neden olur. **Herhangi bir önemsiz liste için FlatList kullanmayı** (ve ScrollView'u yalnızca küçük, sabit içerik için) anlamak önemli pratik bilgidir ve gerçek performans sorunlarını önler. Temel kullanımı anlamak (data dizisi, renderItem fonksiyonu ve benzersiz anahtarlar için keyExtractor) listeleri render etmek için gereklidir. **Faydalı özellikleri** anlamak — `onEndReached` (sonsuz kaydırma/sayfalandırma için, sonuna yakın daha fazla veri yüklemek — çok yaygın bir ihtiyaç), çekilerek yenileme, başlık/altbilgi/ayırıcı bileşenleri, ızgara ve yatay düzenler, ve gruplandırılmış listeler için SectionList — uygulamaların sahip olduğu yaygın liste gereksinimlerini kapsar. Listeleri verimli bir şekilde göstermek neredeyse evrensel bir uygulama gerekliliği ve FlatList (tembel render etme/sanallaştırmayla) standart, performanslı React Native çözümü — naif ScrollView+map yaklaşımından çok daha iyi — FlatList'i anlamak, sık kullanılan React Native bilgisi — neredeyse her uygulamada veri listelerini göstermek için kullanılan temel bir bileşendir, verimli tembel render etme ve özellikleri (sonsuz kaydırma ve çekilerek yenileme gibi) anlamak, performanslı ve işlevsel listeler oluşturmak için temeldir, bu React Native geliştirme için standart bir beceridir.