FlatList மூலம் பட்டியல்களை எவ்வாறு render செய்வீர்கள்?

Question

Accepted Answer

**FlatList** என்பது React Native இல் **scrollable பட்டியல்கள்** கள் தரவை திறமையாக render செய்ய பயன்படும் கூறு ஆகும். இது **lazily** render செய்கிறது (கண்ணுக்குத் தெரியும் பகுதிகளை மட்டுமே), இது நீண்ட பட்டியல்களுக்கு செயல்திறன் மிக்கதாக இருக்கிறது — ScrollView இல் தரவு மீது mapping செய்வதை விட மிகவும் சிறந்தது. ## 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 ஐ render செய்வது), மற்றும் **keyExtractor** (தனிப்பட்ட keys) ஐ எடுத்துக்கொண்டு பொருட்களை திறமையாக render செய்கிறது. ## 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 features ```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 ஐ புரிந்துகொள்வது அপরिहार्य ஆகும் ஏனெனில் **app களில் தரவு பட்டியல்களைக் காட்டுவது ஒரு உலகளாவிய தேவை** ஆகும், மற்றும் FlatList என்பது React Native இல் அதைச் செய்வதற்கான நிலையான, திறமையான வழி ஆகும், எனவே இது அவசியமான அறிவு. প்রায் ஒவ்வொரு app ம் பட்டியல்களைக் காட்டுகிறது (feeds, messages, search results), மற்றும் திறமையாக செய்வது முக்கியமான விஷயமாகும். மূல অন்தர்দৃஷ்டி என்னவெனில் **FlatList பொருட்களை lazily render செய்கிறது** (virtualization மூலம் கண்ணுக்குத் தெரியும் பகுதிகளை மட்டுமே, scroll செய்யும்போது recycle செய்யப்படும்) — இது நீண்ட பட்டியல்களுக்கு செயல்திறன் மிக்கதாக இருக்கிறது, **ScrollView உடன் `data.map()`** பயன்படுத்தும் பொதுவான தவறுக்கு நேர்மாறாக, இது அனைத்து பொருட்களையும் ஒரே சமயத்தில் render செய்கிறது (திரையின் வெளிப்புறத்திலும்), நீண்ட பட்டியல்களுக்கு மெதுவாக இருப்பது மற்றும் நினைவு சிக்கல்களை ஏற்படுத்துகிறது. **எந்த non-trivial பட்டியலுக்கும் FlatList பயன்படுத்த வேண்டும்** (மற்றும் ScrollView ஐ சிறிய, நிர்ধारிত உள்ளடக்கத்திற்கு மட்டுமே பயன்படுத்த வேண்டும்) என்பதை புரிந்துகொள்வது முக்கியமான நடைமுறை அறிவு ஆகும், இது உண்மையான செயல்திறன் சிக்கல்களைத் தடுக்கிறது. மூல பயன்பாட்டைப் புரிந்துகொள்வது (the `data` array, `renderItem` function, மற்றும் தனிப்பட்ட keys க்கான `keyExtractor`) பட்டியல்களை render செய்ய வேண்டியது ஆகும். **பயனுள்ள features** — `onEndReached` (infinite scroll/pagination க்கு, முடிவுக்கு அருகில் மேலும் தரவு loading செய்வது — மிகவும் பொதுவான தேவை), pull-to-refresh, header/footer/separator components, grid மற்றும் horizontal layouts, மற்றும் grouped பட்டியல்களுக்கான SectionList — apps இன் பொதுவான பட்டியல் தேவைகளை உள்ளடக்குகிறது. பட்டியல்களை திறமையாக காட்டுவது ஒரு உலகளாவிய app தேவை ஆகும் மற்றும் FlatList (அதன் lazy rendering/virtualization உடன்) நிலையான, திறமையான React Native தீர்வு — naive ScrollView+map அணுகுமுறையை விட மிகவும் சிறந்தது — FlatList ஐப் புரிந்துகொள்வது அপরिहार्य, அடிக்கடி பயன்படுத்தப்படும் React Native அறிவு ஆகும் — பொருட்களைக் காட்ட ஏறக்குறைய ஒவ்வொரு app இலும் பயன்படுத்தப்படும் ஒரு முக்கிய component, அதன் திறமையான lazy rendering மற்றும் features (infinite scroll மற்றும் pull-to-refresh போன்ற) ஐ புரிந்துகொள்வது செயல்திறன் மிக்க, செயல்பட்ட பட்டியல்களை உருவாக்குவதற்கு அடிப்படையாக இருக்கிறது, React Native development க்கான ஒரு நிலையான திறமை.