Familiarizándose con react-window

En la comunidad de desarrollo frontend, solemos utilizar performancemucho esta palabra. Todos tenemos el objetivo común de tener una aplicación de alto rendimiento. Brian Vaughan desarrolló react-windowcon esto en mente e hizo un gran trabajo al brindarnos una herramienta poderosa para lograr este objetivo.

La teoría detrás de react-window

react-windowEn teoría es muy sencillo de entender, la ventana se refiere a la vista que puede ver el usuario.

react-windowSolo se renderizará lo que el usuario puede ver, porque ¿por qué nos molestaríamos en utilizar recursos para renderizar áreas que el usuario no puede ver? ¡Eso sería una tontería!

Seamos prácticos

¿No sería muy difícil crear un perfil de una aplicación sin una aplicación real? He creado una aplicación que obtiene una gran lista de películas. Puedes consultar el repositorio aquí.

Simplemente ejecute un npm instally luego npm start, ahora debería ver lo siguiente enlocalhost:3000

Medidas iniciales

El siguiente código movie-list.jsobtendrá 5000películas de nuestra gran respuesta:

const moviesList = movies.slice(0, 5000);

Lo usaremos 5000como tamaño de muestra, ya que es bastante voluminoso y tomará algún tiempo procesarlo.

Comenzaremos midiendo nuestro rendimiento inicial. Lo primero que mediremos serán los cuadros por segundo ( FPS). Para habilitar esto en Chrome DevTools, debes activar la renderización haciendo clic en Más herramientas y luego en Renderización.

Frame RateEl nuestro 34.0 fpses bastante lento, buscamos más bien lograr algo alrededor 60fps.

Lo siguiente que mediremos es nuestro First Meaningful Paint. Para ello, ejecuté un informe de Lighthouse, que no podía manejar las 5000películas, así que, solo para esta prueba, moví la cantidad de películas a500

Como puedes ver arriba, el rendimiento no es bueno y recuerda que esto es con 500películas, no 5000.

Implementando react-window

Realizaré todas las mejoras de rendimiento en una nueva rama llamada performance-increased, esto significa que cuando clones el repositorio tendrás la aplicación lenta en la masterrama y podrás alternar entre ambas para ver la diferencia.

Para implementarlo react-window, primero debes instalarlo ejecutando npm install react-windowy luego importarlo FixedSizeList.

import { FixedSizeList as List } from 'react-window';

Creando una fila

Para trabajar con el Listcomponente, necesitamos crear un Rowcomponente como este:

// all props are passed by the List componentconst Row = ({ index, style, data }) = {  const movie = data[index];  // style is passed by the List component to give our Row the correct dimensions  return (    div style={style} key={index}      Movie key={index} {...movie} /    /div  );};

No entraremos en el Moviecomponente porque no importa, básicamente es nuestra visión de cada película.

Componente AutoSizer

Con nuestro Rowcomponente creado, podemos entonces implementar nuestro Listcomponente que envolvemos en un AutoSizercomponente:

AutoSizer  {({ height, width }) = (    List      className="List"      height={height}      itemCount={1000}      itemSize={150}      width={width}      itemData={moviesList}          {Row}    /List  )}/AutoSizer

El AutoSizercomponente escalará automáticamente Rowlas dimensiones de nuestro componente a su contenedor al pasarle una propiedad heighty widtha nuestro Listcomponente. También puedes pasarle valores estáticos a la propiedad heighty width.

Para instalar AutoSizer, ejecute npm install react-virtualized-auto-sizery luego importe:

import AutoSizer from 'react-virtualized-auto-sizer';

Componente de lista

El Listcomponente es bastante simple, como puedes ver tenemos un prop llamado itemDataal cual pasamos todas nuestras 5000películas. Esto nos permite acceder a una película individual en nuestro Rowcomponente.

const movie = data[index];

El itemSizepunto de apoyo es la altura de cada fila. El resto de los puntos de apoyo son bastante simples.

El componente Lista pasa una propiedad styleand indexa nuestro Rowcomponente de forma predeterminada

Ahora que todo está en su lugar, revisemos nuestro FPSmedidor. Esta vez está mucho más cerca de nuestro objetivo de 60fps.

Si clonaste el repositorio y comparaste las dos ramas, también verás cuánto más rápido es el renderizado inicial. Para comprobarlo, ejecutemos otra auditoría.

Al principio puntuamos 63en nuestro desempeño, pero ahora puntuamos 100. Nuestro First Meaningful Paintpuntaje fue de solo 1.1s, en comparación con el 4.8sde no hacerlo react-window. Recuerde también que esta auditoría se realizó en 5000películas, no en 500la auditoría inicial.

Terminando

De lo anterior se puede ver lo potente react-windowque es. Nuestra aplicación era muy sencilla, pero aun así podemos ver grandes beneficios en el rendimiento. Espero que hayas aprendido algo de este artículo y estés más cerca de alcanzar tus objetivos de rendimiento.