¿Cómo renderizas listas con FlatList?

Question

Accepted Answer

**FlatList** es el componente de React Native para renderizar eficientemente **listas desplazables** de datos. Renderiza elementos **de forma perezosa** (solo lo visible), haciendo que sea performante para listas largas — mucho mejor que mapear sobre datos en un ScrollView. ## FlatList — listas eficientes ```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 toma el array **data**, una función **renderItem** (renderizando cada elemento), y un **keyExtractor** (claves únicas) — y renderiza elementos de forma eficiente. ## Por qué FlatList (no 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. ``` ## Características útiles de 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 ``` ## Por qué es importante Entender FlatList es esencial porque **mostrar listas de datos es una necesidad casi universal** en las aplicaciones, y FlatList es la forma estándar y performante de hacerlo en React Native, por lo que es conocimiento imprescindible. Casi todas las aplicaciones muestran listas (feeds, mensajes, resultados de búsqueda), y hacerlo de forma eficiente es importante. La idea clave es que **FlatList renderiza elementos de forma perezosa** (solo lo visible, mediante virtualización, reciclaje mientras desplazas) — haciendo que sea performante para listas largas, en contraste con el error común de usar un **ScrollView con `data.map()`** que renderiza todos los elementos a la vez (incluso los fuera de pantalla), causando lentitud y problemas de memoria para listas largas. Entender **usar FlatList para cualquier lista no trivial** (y ScrollView solo para contenido pequeño y fijo) es conocimiento práctico importante que previene problemas reales de rendimiento. Entender el uso básico (el array `data`, la función `renderItem`, y `keyExtractor` para claves únicas) es necesario para renderizar listas. Entender **características útiles** — `onEndReached` (para desplazamiento infinito/paginación, cargar más datos cerca del final — una necesidad muy común), pull-to-refresh, componentes de encabezado/pie/separador, diseños de cuadrícula y horizontales, y SectionList para listas agrupadas — cubre los requisitos comunes de listas que tienen las aplicaciones. Ya que mostrar listas eficientemente es una necesidad casi universal en aplicaciones y FlatList (con su renderizado perezoso/virtualización) es la solución estándar y performante de React Native — mucho mejor que el enfoque ingenuo ScrollView+map — entender FlatList es conocimiento esencial y de aplicación frecuente en React Native — un componente central utilizado en casi todas las aplicaciones para mostrar listas de datos, donde entender su renderizado perezoso eficiente y características (como desplazamiento infinito y pull-to-refresh) es fundamental para construir listas performantes y funcionales, una habilidad estándar para el desarrollo en React Native.