Lists with FlatList

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

FlatList က data (array) + renderItem (item တစ်ခုစီကို ဘယ်လို ပြသမလဲ) + keyExtractor (item တစ်ခုစီရဲ့ unique key) ဆိုတဲ့ prop သုံးခုအဓိကနဲ့ အလုပ်လုပ်ပါတယ်။ ScrollView + .map() ကို item ရာနဲ့ချီရင် screen ပေါ် မမြင်ရသေးတဲ့ item တွေအားလုံးကို upfront render လုပ်ထားလို့ memory/performance ပြဿနာ ဖြစ်နိုင်ပါတယ် — FlatList ကတော့ virtualization (screen ပေါ်နီးစပ်တဲ့ item များကိုသာ render, အခြားကို recycle) သုံးပြီး item ရာချီ list တွေမှာ performance ကောင်းနေစေပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Chat app message list, e-commerce product list, social media feed — ဒီလိုမျိုး item အများကြီးပါတဲ့ list တိုင်းအတွက် FlatList က standard choice ပါ။ renderItem ထဲမှာ card component တစ်ခုစီကို return လုပ်ပြီး, keyExtractor ကို item._id ဒါမှမဟုတ် item.id ကို string ပြောင်းပြီး ပေးရပါတယ် — key မမှန်ရင် React reconciliation performance ကျနိုင်ပါတယ်။

• FlatList = data + renderItem + keyExtractor
• Virtualization = screen ပေါ်ရှိ item ကိုသာ render (memory efficient)
• keyExtractor = item တစ်ခုစီရဲ့ unique key ပေးခြင်း

Code နမူနာ

import { FlatList, View, Text, StyleSheet } from 'react-native';

const products = [
  { id: '1', name: 'T-Shirt', price: '15000 MMK' },
  { id: '2', name: 'Sneakers', price: '85000 MMK' },
  { id: '3', name: 'Backpack', price: '45000 MMK' },
];

export default function ProductList() {
  return (
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Text style={styles.name}>{item.name}</Text>
          <Text>{item.price}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderBottomWidth: 1, borderColor: '#eee' },
  name: { fontWeight: '600', fontSize: 16 },
});

Product list ကို FlatList ဖြင့် scroll လုပ်ကြည့်နိုင်အောင် render နိုင်မည်။