Las listas son una parte integral de la mayoría de las aplicaciones web porque ayudan a mostrar los datos en un formato más presentable.

Pero, cuando una aplicación intenta manejar demasiados datos en una lista, a menudo genera problemas de rendimiento.

En esta guía, describiremos algunos problemas asociados con las listas infladas, luego veremos cinco métodos diferentes que puede usar para superar estos desafíos de rendimiento en las aplicaciones React.

Tabla de contenido:

1. Problemas de rendimiento con listas grandes
2. Paginación
3. Scroll infinito
4. react-virtualized
5. react-window
6. React ViewPort List 🤜🤛🤓💕😍

---

 Problemas de rendimiento con listas grandes

Vamos a crear una aplicación de muestra para demostrar lo que sucede con el rendimiento de su aplicación y el árbol DOM cuando intenta representar una lista grande de 10,000 registros.

Inicie su terminal y pegue el código a continuación para crear una aplicación React:

npx create-react-app render-list

Ejecute el código a continuación para instalar la biblioteca Faker, que usaremos para generar datos aleatorios para usar en la aplicación:

npm i @faker - js / faker

Más información de dennysjmarquez 🤜🤛🤓

Los problemas de rendimiento con listas grandes pueden ser un problema importante cuando se trabaja con React.

Renderizar demasiados elementos a la vez puede causar problemas de rendimiento y ralentizar tu aplicación.

La paginación es una técnica utilizada para dividir una lista en trozos de datos más pequeños y manejables, más fáciles de acceder y procesar para el usuario. Esto reduce el tiempo de carga y procesamiento así como el uso de memoria.

Al utilizar la paginación con listas grandes, los usuarios tendrán una experiencia mejorada cuando naveguen por conjuntos de datos largos por Ej. Búsquedas.

---

👉 React ViewPort List ✨ es mi librería favorita para tratar los problemas de rendimiento asociados a las listas grandes en React.

Funciona renderizando solo los elementos que son visibles dentro del viewport, permitiéndote renderizar eficientemente una lista de cientos o incluso miles de elementos sin sacrificar el rendimiento.

Además, ofrece funciones como la paginación y el desplazamiento infinito que se pueden utilizar para optimizar aún más la experiencia de carga de la lista.

Otra característica útil que brinda está herramienta es su capacidad para detectar cuando se agregaron o eliminaron elementos dentro de la lista sin requerir ninguna acción adicional por parte del desarrollador.

Estas características hacen que sea un gran aliado si tu proyecto incluye listados grandes con muchos elementos dinámicamente cambiantes.