તમે FlatList સાથે સૂચિઓ કેવી રીતે રેન્ડર કરો છો?

Question

Accepted Answer

**FlatList** એ React Native નો ઘટક છે જે ડેટાની **સ્ક્રોલ કરી શકાય તેવી સૂચિ** ને કુશળતાથી રેન્ડર કરે છે. તે આઇટમ્સને **આળસથી** રેન્ડર કરે છે (માત્ર જે દૃશ્યમાન છે), જે તેને લાંબી સૂચિઓ માટે કર્મક્ષમ બનાવે છે — ScrollView માં ડેટા પર મેપ કરવા કરતાં ઘણું વધુ સારું છે. ## 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** એરે, **renderItem** ફંક્શન (દરેક આઇટમ રેન્ડર કરવું), અને **keyExtractor** (અનન્ય કી) લે છે — અને આઇટમ્સને કુશળતાથી રેન્ડર કરે છે. ## 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 માં તે કરવાનો માનક, કર્મક્ષમ રીત છે, તેથી તે આવશ્યક જ્ઞાન છે. લગભગ દરેક એપ્લિકેશન સૂચિ પ્રદર્શિત કરે છે (ફીડ્સ, સંદેશાઓ, શોધ પરિણામો), અને તે કુશળતાથી કરવું મહત્વપૂર્ણ છે. મુખ્ય અંતર્દૃષ્ટિ એ છે કે **FlatList આઇટમ્સને આળસથી રેન્ડર કરે છે** (માત્ર જે દૃશ્યમાન છે, વર્ચુઅલાઇজેશન દ્વારા, તમે સ્ક્રોલ કરો તેમ રિસાઇકલ કરવું) — તેને લાંબી સૂચિઓ માટે કર્મક્ષમ બનાવે છે, **ScrollView સાથે `data.map()`** ના સામાન્ય ભૂલની વિરુદ્ધતામાં જે બધી આઇટમ્સ એક સાથે રેન્ડર કરે છે (ઑફ-સ્ક્રીન પણ), જે લાંબી સૂચિઓ માટે ધીમાપણું અને મેમરી સમસ્યાઓ સર્જે છે. કોઈ પણ બિન-તુચ્છ સૂચી માટે **FlatList ઉપયોગ કરવો** (અને ScrollView માત્ર નાના, નિશ્ચિત સામગ્રી માટે) સમજવું મહત્વપૂર્ણ વ્યવહારુ જ્ઞાન છે જે વાસ્તવિક કર્મક્ષમતા સમસ્યાઓ રોકે છે. મૂળભૂત ઉપયોગ સમજવું (હોય તે `data` એરે, `renderItem` ફંક્શન, અને અનન્ય કી માટે `keyExtractor`) સૂચિ રેન્ડર કરવા માટે જરૂરી છે. **ઉપયોગી વિશેષતાઓ** સમજવી — `onEndReached` (અનંત સ્ક્રોલ/પેજિનેશન માટે, અંતની નજીક વધુ ડેટા લોડ કરવું — ખૂબ સામાન્ય જરૂર), pull-to-refresh, header/footer/separator ઘટકો, ગ્રીડ અને આડી લેઆઉટ્સ, અને જૂથબદ્ધ સૂચિઓ માટે SectionList — એપ્લિકેશનો પાસે સામાન્ય સૂચી જરૂરિયાતોને આવરી લે છે. કુશળતાથી સૂચિ પ્રદર્શિત કરવું એ લગભગ સાર્વત્રિક એપ્લિકેશન જરૂર છે અને FlatList (તેની આળસ રેન્ડરિંગ/વર્ચુઅલાઇજેશન સાથે) એ માનક, કર્મક્ષમ React Native ઉપાય છે — નિર્દોષ ScrollView+map અભિગમ કરતાં ઘણું સારું — FlatList સમજવું આવશ્યક, વારંવાર લાગુ React Native જ્ઞાન છે — એક મુખ્ય ઘટક જે લગભગ દરેક એપ્લિકેશનમાં ડેટા સૂચિ પ્રદર્શિત કરવા માટે ઉપયોગ થાય છે, જ્યાં તેની કુશળ આળસ રેન્ડરિંગ અને વિશેષતાઓ (જેમ કે અનંત સ્ક્રોલ અને pull-to-refresh) સમજવું કર્મક્ષમ, કાર્યાત્મક સૂચિ બનાવવા માટે મૌલિક છે, React Native વિકાસ માટે માનક કૌશલ્ય.