Maneras sencillas de acelerar su aplicación React

Hola, les saluda Luis y para hoy les traigo un nuevo tutorial.

React es, posiblemente, la biblioteca de UI más fácil que existe. Pero esta facilidad tiene un costo, que es el rendimiento. En este artículo, enumeraré algunas formas de mejorar drásticamente el rendimiento de su aplicación React.

Índice

¡Usa llaves!

Esto puede ser obvio, pero es imperativo. Si renderiza algo como una lista (usando .map, o algo como FlatList), React usa las teclas bajo el capó para optimizar los renders. Si omite las claves o, lo que es peor, las hace no únicas, no solo su aplicación funcionará lentamente, sino que puede provocar algunos errores frustrantes. Entonces, este código:

data.map(item => <SomeComponent item=item />)

Se convierte en:

data.map(item => <SomeComponent key=item.id item=item />)

Puede tener la tentación de utilizar el índice como clave:

data.map((item, index) => <SomeComponent key=index item=item />)

Déjame detenerte ahí mismo. Esto solo funcionaría si los elementos en data nunca se reorganizan, eliminan o insertan. Incluso si este es el caso ahora, piense en algunos pasos adelante: ¿necesitará mutar data algunos sprints por la carretera? Ya me lo imaginaba.

¡Utilice listas virtualizadas!

Estrechamente relacionado con el punto anterior, esto se aplica cuando necesita renderizar grandes cantidades de datos listados. Hay algunas bibliotecas para proyectos React y React Native que proporcionan una funcionalidad similar. La forma en que funcionan las listas virtualizadas es que solo se renderizan los pocos elementos que están actualmente visibles en la ventana gráfica, y todo lo demás se renderiza de forma perezosa (bajo demanda) a medida que se desplaza.

POST RELACIONADO: Crea un juego Tic Tac Toe usando JavaScript

En React, tus opciones son react-window y react-virtualized para casos de uso un poco más complicados. Por ejemplo, usando react-window convertirá este código:

data.map(item => <SomeComponent key=item.id item=item />);

Dentro de esto:

const Row = (index) => <SomeComponent item=data[index] /> // later, in render 
return ( 
<List height=150 itemCount=data.length> Row </List> 
);

Ahora puede tener tantos elementos en data, sin preocuparse de que tardarán una eternidad en renderizarse.

En React Native, el FlatList se utiliza:

<FlatList 
data=data
renderItem=(item) => <SomeComponent item=item /> 
/>

¡Utilice React Profiler!

Si después de implementar las 2 técnicas anteriores aún no está satisfecho con el rendimiento de su aplicación React, considere usar el generador de perfiles React. Le dirá exactamente qué se vuelve a reproducir, cuándo, cuánto tiempo lleva y, lo que es más importante, qué causó la rendición en primer lugar.

El generador de perfiles React está integrado en la extensión React devtools, por lo que lo más probable es que ya lo tengas instalado. Si no, dirígete aquí. Para los desarrolladores de React Native, desafortunadamente no hay una manera fácil de hacer esto. Hay 2 formas de crear perfiles de una aplicación React Native:

Abra el menú de desarrollo en su teléfono / simulador (agitar / Ctrl + M) y presione Habilitar superposición de rendimiento. Proporcionará una pequeña ventana que muestra los FPS actuales tanto de la interfaz de usuario como de los subprocesos JS, así como el número de fotogramas omitidos. Usándolo, puede aproximadamente dónde está el problema.
Utilizar systrace para Android y XCode para IOS. Estas son herramientas de bajo nivel que requieren una configuración avanzada. Esto está fuera del alcance de este artículo, por lo que Lee esto aprender más.

POST RELACIONADO: Ejecutar promesas en un bucle secuencialmente, una por una

¡Utilice useMemo!

Lo más probable es que esté procesando datos en su aplicación. Lo más probable es que no tenga que volver a procesarlo en cada entrega. useMemo está diseñado específicamente para esto.

useMemo toma una función y una lista de dependencias. Luego, recordará el valor que devuelve la función y no volverá a llamar a la función a menos que cambie una de las dependencias. Por ejemplo:

const importantData = useMemo(() => calculateImportantData(rawData, [rawData]);

Para aprender más sobre useMemo, usted puede lee mi articulo explicándolo en detalle.

¿Usar React Concurrent Mode?

Proceda con precaución. React Concurrent Mode es una reescritura importante de los componentes internos de React, que permiten la representación asincrónica y múltiples árboles DOM virtuales. Proporciona un enorme aumento de rendimiento, pero esta función aún es experimental y no es adecuada para aplicaciones de producción. Leer más sobre cómo funciona y cómo habilitarlo aquí.