React.memo y sus usos

1. ¿Qué es React.memo?
2. Qué hace React.memo

React es popular porque permite a los desarrolladores crear aplicaciones dinámicas.

Sin embargo, el comportamiento predeterminado de los componentes de React es ineficiente. La biblioteca incluye PureComponent para componentes de clase y React.memo HOC para componentes funcionales para abordar este problema.

Estas soluciones pueden reducir la cantidad de veces que se actualizan los componentes y hacer que las aplicaciones React sean mucho más eficientes. Este artículo explorará qué hace React.memo y cómo usarlo.

¿Qué es React.memo?

React.memo es un componente de orden superior, que envuelve los componentes de funciones normales en React.

Si el componente no tiene efectos secundarios y genera el mismo resultado con los mismos accesorios, React.memo puede mejorar la velocidad y el rendimiento de su componente.

La aplicación envuelta en el componente de orden superior React.memo, y todos sus elementos secundarios, solo se volverán a procesar si los accesorios cambian. Los componentes secundarios del árbol también se volverán a representar si cambia su estado o contexto local.

Aquí hay un ejemplo de un componente envuelto en React.memo HOC:

const App = React.memo(() => {
  return <p>Hello World</p>;
});

Cualquier árbol de componentes bajo el componente App también se verá afectado. Aquí hay un enlace al código de reproducción.

Qué hace React.memo

Todos los componentes en React tienen un método predeterminado shouldComponentUpdate(), que desencadena re-renderizaciones cada vez que cambian sus propios accesorios o los de los padres.

Envolver un componente en React.memo HOC puede cambiar este comportamiento predeterminado. Una vez envuelto, el método shouldComponentUpdate() cambiará, y el componente y todos sus elementos secundarios solo se volverán a representar si el estado local o las propiedades cambian.

El método realizará una comparación superficial del estado y los accesorios para determinar cuándo volver a renderizar. Si observa el orden en que se llaman los métodos del bucle de vida, shouldComponentUpdate() siempre aparece antes que el método de procesamiento, como debería ser.

Por lo tanto, se llamará a shouldComponentUpdate() cada vez que cambien los accesorios. Pero el componente y los elementos secundarios solo se volverán a renderizar si la comparación superficial determina que sus accesorios han cambiado.

Ganancias de rendimiento

Al reducir las actualizaciones innecesarias, memorizar (envolver un componente React en el HOC React.memo) puede mejorar significativamente el rendimiento de su aplicación.

Puede envolver su componente en React.memo, o puede envolver selectivamente algunas ramas del árbol de componentes. Puede usar herramientas de creación de perfiles para encontrar si hay ineficiencias lo suficientemente significativas en su aplicación como para justificar el uso de React.memo.

Como regla general, hacer una comparación superficial en objetos props siempre es más barato que llamar a React.createElement() y comparar árboles de componentes completos.

Sin embargo, si su componente tiene accesorios de comparación profundos, la comparación superficial de React.memo será insuficiente. Además, este componente de orden superior no funciona si su componente recibe y muestra valores prop hijos.