React

Buenas prácticas en React

¿Cómo mejorar la performance?

PureComponent (Clases)

Basado en el concepto de programación funcional, una función es pura si

El valor es determinado por los inputs que recibe
El valor siempre es el mismo para los mismos valores.

Este tipo de componentes están optimizados para una mayor performance de renderizado, ya que solo cambian si detectan un cambio en sus props y estos son distintos a los valores anteriores.

React implementa el método shouldComponentUpdate() con una shallow comparison para props y state.

Si el componente no es puro, por default devuelve true, lo que permite que se actualice siempre

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

React Memo (Funciones)

React memo es el mismo concepto sólo que es para funciones en vez de clases, se basa en el concepto de memorization cachear la respuesta de la función para los mismos valores.

Tener en cuenta que memo también puede recibir una función arePropsEqual(prevProps, nextProps)

import React, { memo } from 'react';

function Button({title, onClick }) {
  return (
      <button onClick={onClick}>{title}</button>
  )
}

// Wrapeamos el componente utilizando `React.memo()`
export default memo(Button);

Binding Functions

Las funciones para tener acceso al state y props del componente hay que bindearlas, las formas más comunes son en el constructor o utilizando arrow functions.

Bad Practice

Cada vez que se renderiza el componente se esta creando una nueva función afectando la performance.

render() {
    return <button onClick={this.handleClick.bind(this)}>Clickéame</button>;
}

render() {
    return <button onClick={() => this.handleClick()}>Clickéame</button>;
}

Consideraciones

Las funciones son agregadas al prototype del componente mientras que las arrow functions son una instancia de una property.

Debouncing & Throttling

Cuando realizamos validaciones por ejemplo en campos de formularios o en un autocomplete, no queremos ejecutar todo el tiempo la función para validar el input o hacer un fetch ya que esto provoca llamadas continuas a la API.

Debouncing y Throttling se utilizan en estas situaciones para evitar que se ejecute muchas veces.

Throttle: Fija un máximo de ejecuciones por intervalo de tiempo.

Debounce: Fija un tiempo mínimo entre ejecuciones.

Key index (Listas)

Evitar utilizar el índice como key en un map al renderizar elementos.

Utilizando la key como indice podemos mostrar información mal, esto se nota por ejemplo al remover o agregar items en una lista , como la key es la misma React asume que el elemento del DOM es el mismo.

Webpack Bundle Analyzer

Verificar si existen librerías que no son necesarias y agregan peso, tambien para verificar si existe alguna demasiado pesada para buscar alternativas que resuelvan lo mismo.

Server Side Render

React es una librería para crear aplicaciones SPA, sin embargo a la hora de mejorar el rendimiento tiene 2 issues

SEO: Al ser client side los motores de búsqueda no pueden llegar a indexar ya que ven una pantalla en blanco con un div como root
Tiempo de carga: Cuando la aplicación carga por primera vez el tiempo de carga es alto ya que tiene que interpretar.

Virtualización (Listas)

Si tenemos una lista demasiado grande > 1000 items la performance empieza a disminuir por la cantidad de nodos que va agregando al DOM. Ahi entra en juego la virtualización de listas, que renderiza los items que son visibles en el viewport.

Se basa en el concepto de tener una window y ir moviendose alrededor de la lista, utilizando las posiciones relativas para calcular width, height, left, top.

Code Splitting

El code splitting sirve cuando la aplicación empieza a crecer y tu bundle empieza hacerse grande, en vez de tener un bundle.js enorme, se va dividiendo en varios.

Esta técnica permite tener sólo él javascript que se necesita por ejemplo por vista, reduciendo el tamaño y mejorando la performance.

“technique of splitting your code into various bundles which can then be loaded on demand or in parallel” Webpack

                          Asset      Size                 Chunks             Chunk Names
              another.bundle.js  5.95 KiB                another  [emitted]  another
                index.bundle.js  5.89 KiB                  index  [emitted]  index
vendors~another~index.bundle.js   547 KiB  vendors~another~index  [emitted]  vendors~another~index

React lazy permite realizar imports dinámicos, para poder cargarlos cuando realmente se necesitan.

const HeaderMeli = React.lazy(() => import('./HeaderMeli'));

Es muy usado cuando tenemos un componente especifico que esta usando una libreria de 3eros que es pesada y no queremos afectar el tamaño del bundle

Ejemplo React.Lazy

En el gif podemos ver qué no estamos cargando la librería de entrada, sino recién se carga al tocar el button generate pdf, para visualizar el documento.

Tener en cuenta que React.Lazy no funciona en SSR , en el caso de necesitarlo usar react-loadable

Code Minification

Minificar el código significa eliminar todo el código que no es necesario a la hora de hacer el build para producción, comentarios, identados, etc. Hay varias formas de hacerlo orientada a react directamente plugins de webpack.

PreviousWeb Workers NextAuditar con Chrome

Last updated 5 years ago

Was this helpful?