Las tablas y listas supergrandes pueden ralentizar significativamente el rendimiento de su sitio. ¡La virtualización puede ayudar!
react-window es una biblioteca que permite renderizar listas grandes de manera eficiente.
Aquí hay un ejemplo de una lista que contiene 1000 filas que se renderizan con react-window. Intente desplazarse sobre ella lo más rápido que pueda.
¿Por qué es útil esto?
Puede haber ocasiones en las que necesite mostrar una tabla grande o una lista que contenga muchas filas. La carga de cada elemento de una lista de este tipo puede afectar el rendimiento de manera significativa.
La virtualización de listas, o "partición de la pantalla en ventanas", es el concepto de renderizar solo lo que es visible para el usuario. El número de elementos que se renderizan al principio es un subconjunto muy pequeño de la lista completa y la "ventana" de contenido visible se mueve cuando el usuario continúa desplazándose. Esto mejora tanto el rendimiento de renderizado como el de desplazamiento de la lista.