Come renderizzi liste con FlatList?

Question

Accepted Answer

**FlatList** è il componente di React Native per renderizzare efficientemente **liste scorrevoli** di dati. Renderizza gli elementi **in modo lazy** (solo quelli visibili), rendendolo performante per liste lunghe — molto meglio rispetto alla mappatura dei dati in una ScrollView. ## FlatList — liste efficienti ```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 accetta l'array **data**, una funzione **renderItem** (renderizzando ogni elemento) e un **keyExtractor** (chiavi univoche) — e renderizza gli elementi efficientemente. ## Perché FlatList (non 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. ``` ## Funzionalità utili di 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 ``` ## Perché è importante Comprendere FlatList è essenziale perché **mostrare liste di dati è un'esigenza quasi universale** nelle app, e FlatList è il modo standard e performante per farlo in React Native, quindi è una conoscenza imprescindibile. Quasi ogni app mostra liste (feed, messaggi, risultati di ricerca), e farlo efficientemente è importante. L'intuizione chiave è che **FlatList renderizza gli elementi in modo lazy** (solo quelli visibili, tramite virtualizzazione, riciclando mentre scorri) — rendendolo performante per liste lunghe, in contrasto con l'errore comune di usare una **ScrollView con `data.map()`** che renderizza tutti gli elementi contemporaneamente (anche quelli fuori schermo), causando lentezza e problemi di memoria per liste lunghe. Comprendere di **usare FlatList per qualsiasi lista non banale** (e ScrollView solo per contenuti piccoli e fissi) è una conoscenza pratica importante che previene veri problemi di performance. Comprendere l'utilizzo base (l'array `data`, la funzione `renderItem` e il `keyExtractor` per chiavi univoche) è necessario per renderizzare liste. Comprendere **le funzionalità utili** — `onEndReached` (per scroll infinito/paginazione, caricamento di più dati verso la fine — un'esigenza molto comune), pull-to-refresh, componenti di intestazione/piè di pagina/separatore, layout a griglia e orizzontali, e SectionList per liste raggruppate — copre i requisiti comuni che le liste nelle app hanno. Poiché mostrare liste efficientemente è un'esigenza app quasi universale e FlatList (con il suo rendering lazy/virtualizzazione) è la soluzione standard e performante di React Native — molto meglio dell'approccio ingenuo ScrollView+map — comprendere FlatList è una conoscenza React Native essenziale e frequentemente applicata — un componente core utilizzato in quasi ogni app per mostrare liste di dati, dove comprendere il suo efficiente rendering lazy e le sue funzionalità (come lo scroll infinito e il pull-to-refresh) è fondamentale per costruire liste performanti e funzionali, un'abilità standard per lo sviluppo di React Native.