آپ FlatList کے ساتھ لسٹیں کیسے رینڈر کرتے ہیں؟

Question

Accepted Answer

**FlatList** React Native کا کمپوننٹ ہے جو ڈیٹا کی **scrollable لسٹیں** کو موثر طریقے سے رینڈر کرتا ہے۔ یہ آئٹمز کو **سستی طریقے سے** رینڈر کرتا ہے (صرف وہ جو نظر آتے ہیں)، جو لمبی لسٹوں کے لیے کارکردگی میں بہتری لاتا ہے — ScrollView میں ڈیٹا کو map کرنے سے بہت بہتر۔ ## FlatList — موثر لسٹیں ```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** array، **renderItem** function (ہر item کو رینڈر کرنے کے لیے)، اور **keyExtractor** (منفرد keys کے لیے) لیتا ہے — اور items کو موثر طریقے سے رینڈر کرتا ہے۔ ## FlatList کیوں (ScrollView + map نہیں) ```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. ``` ## مفید FlatList خصوصیات ```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 ``` ## اہمیت کیوں ہے FlatList کو سمجھنا ضروری ہے کیونکہ **ڈیٹا کی لسٹیں دکھانا ایپس میں تقریباً ہمہ گیر ضرورت ہے**، اور FlatList React Native میں معیاری، موثر طریقہ ہے، اس لیے یہ لازمی علم ہے۔ تقریباً ہر ایپ لسٹیں دکھاتی ہے (feeds، پیغامات، تلاش کے نتائج)، اور ایسا موثر طریقے سے کرنا اہم ہے۔ اہم نکتہ یہ ہے کہ **FlatList items کو سستی طریقے سے رینڈر کرتا ہے** (صرف وہ جو نظر آتے ہیں، virtualization کے ذریعے، scroll کرتے ہوئے recycling)— یہ لمبی لسٹوں کے لیے کارکردگی میں بہتری لاتا ہے، **ScrollView کے ساتھ `data.map()`** استعمال کرنے کی عام غلطی کے برعکس جو تمام items کو ایک ساتھ رینڈر کرتا ہے (یہاں تک کہ screen سے باہر)، جس سے لمبی لسٹوں میں سست رفتاری اور میموری کے مسائل پیدا ہوتے ہیں۔ یہ سمجھنا کہ **کسی بھی غیر معمولی لسٹ کے لیے FlatList استعمال کریں** (اور ScrollView صرف چھوٹے، fixed content کے لیے) اہم عملی علم ہے جو حقیقی کارکردگی کے مسائل سے بچاتا ہے۔ بنیادی استعمال کو سمجھنا (the `data` array، `renderItem` function، اور unique keys کے لیے `keyExtractor`) لسٹیں رینڈر کرنے کے لیے ضروری ہے۔ **مفید خصوصیات** کو سمجھنا — `onEndReached` (infinite scroll/pagination کے لیے، آخر کے قریب مزید ڈیٹا لوڈ کرنا — بہت عام ضرورت)، pull-to-refresh، header/footer/separator components، grid اور horizontal layouts، اور grouped لسٹوں کے لیے SectionList — عام لسٹ کی ضروریات کو کور کرتا ہے جو ایپس کو ہیں۔ چونکہ لسٹیں موثر طریقے سے دکھانا ایک تقریباً ہمہ گیر ایپ کی ضرورت ہے اور FlatList (اس کی سستی رینڈرنگ/virtualization کے ساتھ) معیاری، موثر React Native حل ہے — سادہ ScrollView+map approach سے بہت بہتر — FlatList کو سمجھنا ضروری، بار بار استعمال ہونے والا React Native علم ہے — ایک core component جو تقریباً ہر ایپ میں ڈیٹا لسٹیں دکھانے کے لیے استعمال ہوتا ہے، جہاں اس کی موثر سستی رینڈرنگ اور خصوصیات (جیسے infinite scroll اور pull-to-refresh) کو سمجھنا موثر، فعال لسٹیں بنانے کے لیے بنیادی ہے، React Native development کے لیے معیاری مہارت۔