Virtualizacion en ReactJS

Cuando en nuestra App hay listas o tablas de gran cantidad de elementos, el rendimiento se verá afectado debido a la carga de todos estos elementos en el DOM. La virtualización es una técnica para mejorar el rendimiento de Web Apps que tienen la necesidad de mostrar grandes volúmenes de datos, ya sea en forma de listas o en forma de tablas. La lógica de la Virtualización consiste en solo renderizar elementos que actualmente se encuentran en el Viewport del usuario. Esto sirve para mejorar la carga inicial de la App, lo que logra una mejor UX.

Virtualizacion en React JS

Para hacer listas o tablas virtualizadas en ReactJS, usamos la biblioteca 'react-window'. Esta biblioteca nos provee de componentes que funcionan como Wrappers a los que pasarle como Children los elementos de la lista/tabla. 'react-window' da utilidades básicas para la virtualización, para implementaciones más avanzadas, por ejemplo un Infinite Scroll, se debería complementar con la biblioteca 'react-window-infinite-loader', o si se quiere un contenedor con dimensiones dinámicas, se debería complementar con la biblioteca 'react-virtualized-auto-sizer'

Como Implementar Virtualizacion

En esta sección voy a mostrar un ejemplo muy básico de virtualización, será solo una demostración con una lista de 1000 elementos.

El paso a paso sería:

• Instalar la biblioteca con el comando npm install react-window.
• Importar el componente <FixedSizeList/>.
• Determinar el ancho y alto del contenedor de <FixedSizeList/>
• <FixedSizeList/> Toma las props height, width, itemCount e itemSize:
  • height: Alto de la lista, debe coincidir con la de su contendor.
  • width: Ancho de la lista, debe coincidir con la de su contendor.
  • itemCount: Número de elementos de la lista.
  • itemSize: Alto aproximado de los elementos a renderizar.
• Crear el componente de <Row />, que toma como props index y style (el style pasa, ya que cada fila tiene que tener un position: absolute y un translate de X cantidad de píxeles, dependiendo del alto del ítem. El index es porque necesita la posición del array para mostrar la data)
• Renderizar directamente el componente Row en la <FixedSizeList/>
• Inspeccionar la consola y ver la cantidad de elementos que hay dentro del contenedor

Conclusion

La virtualización es una técnica muy poderosa a la hora de mejorar rendimiento, aunque no debería ser la primera opción, primero se debería revisar el costo de renderizado de los componentes e intentar reducirlo lo máximo posible, ya sea separando más componentes, o intentando tener el estado lo más localizado posible.