ਤੁਸੀਂ 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** array, **renderItem** function (ਹਰੇਕ ਆਈਟਮ ਨੂੰ ਰੈਂਡਰ ਕਰਨਾ), ਅਤੇ **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 ਵਿੱਚ ਇਸਦਾ ਮਿਆਰੀ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਜ਼ਰੂਰੀ ਜ਼ਾਣਕਾਰੀ ਹੈ। ਲਗਭਗ ਹਰੀ ਐਪ ਸੂਚੀਆਂ ਦਿਖਾਈ ਦੇਵੇ (feeds, ਸੁਨੇਹੇ, ਖੋਜ ਨਤੀਜੇ), ਅਤੇ ਇਸ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕੇ ਨਾਲ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਮੁੱਖ ਸਮਝ ਇਹ ਹੈ ਕਿ **FlatList ਆਈਟਮਾਂ ਨੂੰ ਆਲਸੀ ਤਰੀਕੇ ਨਾਲ ਰੈਂਡਰ ਕਰਦਾ ਹੈ** (ਸਿਰਫ ਜੋ ਦਿਖਾਈ ਦੇਵੇ, virtualization ਰਾਹੀਂ, ਸਕ੍ਰੋਲ ਕਰਨ ਦੌਰਾਨ ਰੀਸਾਇਕਲ ਕਰਦੇ ਹੋਏ) — ਜਿਸ ਨਾਲ ਇਹ ਲੰਬੀ ਸੂਚੀਆਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੈ, **ScrollView ਦੇ ਨਾਲ `data.map()`** ਦੀ ਆਮ ਗਲਤੀ ਦੇ ਉਲਟ ਜੋ ਸਾਰੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਰੈਂਡਰ ਕਰਦਾ ਹੈ (ਭਾਵੇਂ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ), ਜਿਸ ਨਾਲ ਲੰਬੀ ਸੂਚੀਆਂ ਲਈ ਸ਼ਾਮ ਅਤੇ ਮੈਮੋਰੀ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਹੁੰਦੀਆਂ ਹਨ। **ਕਿਸੇ ਵੀ ਗੈਰ-ਮਾਮੂਲੀ ਸੂਚੀ ਲਈ FlatList ਵਰਤਣਾ** (ਅਤੇ ScrollView ਸਿਰਫ ਛੋਟੀ, ਸਥਿਰ ਸਮੱਗਰੀ ਲਈ) ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਵਿਹਾਰਕ ਜ਼ਾਣਕਾਰੀ ਹੈ ਜੋ ਅਸਲ ਪ੍ਰਦਰਸ਼ਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਦੀ ਹੈ। ਬੁਨਿਆਦੀ ਵਰਤੋਂ ਨੂੰ ਸਮਝਣਾ (`data` array, `renderItem` function, ਅਤੇ ਵਿਲੱਖਣ ਕੁੰਜੀਆਂ ਲਈ `keyExtractor`) ਸੂਚੀਆਂ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। **ਉਪਯੋਗੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ** ਨੂੰ ਸਮਝਣਾ — `onEndReached` (ਅਨੰਤ ਸਕ੍ਰੋਲ/pagination ਲਈ, ਅੰਤ ਦੇ ਨੇੜੇ ਹੋਰ ਡੇਟਾ ਲੋਡ ਕਰਨਾ — ਇੱਕ ਬਹੁਤ ਆਮ ਲੋੜ), pull-to-refresh, header/footer/separator ਕੰਪੋਨੈਂਟਸ, grid ਅਤੇ horizontal layouts, ਅਤੇ SectionList ਸਮੂਹਬੱਧ ਸੂਚੀਆਂ ਲਈ — ਐਪਸ ਦੀਆਂ ਆਮ ਸੂਚੀ ਲੋੜਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ। ਕਿਉਂਕਿ ਸੂਚੀਆਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਇੱਕ ਬ੍ਰਹਮ-ਜੈਸੀ ਐਪ ਲੋੜ ਹੈ ਅਤੇ FlatList (ਇਸ ਦੀ ਆਲਸੀ ਰੈਂਡਰਿੰਗ/virtualization ਦੇ ਨਾਲ) ਮਿਆਰੀ, ਪ੍ਰਭਾਵਸ਼ਾਲੀ React Native ਹੱਲ ਹੈ — naive ScrollView+map ਪਹੁੰਚ ਤੋਂ ਬਹੁਤ ਬਿਹਤਰ — FlatList ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ, ਅਕਸਰ-ਲਾਗੂ React Native ਜ਼ਾਣਕਾਰੀ ਹੈ — ਇੱਕ ਮੁੱਖ ਕੰਪੋਨੈਂਟ ਜੋ ਲਗਭਗ ਹਰੀ ਐਪ ਵਿੱਚ ਡੇਟਾ ਸੂਚੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਿੱਥੇ ਇਸ ਦੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਆਲਸੀ ਰੈਂਡਰਿੰਗ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਜਿਵੇਂ ਅਨੰਤ ਸਕ੍ਰੋਲ ਅਤੇ pull-to-refresh) ਦੀ ਸਮਝ ਪ੍ਰਭਾਵਸ਼ਾਲੀ, ਕਾਰਜਸ਼ੀਲ ਸੂਚੀਆਂ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦੀ ਹੈ, React Native ਵਿਕਾਸ ਲਈ ਇੱਕ ਮਾਨਕ ਦਖਲ।