English version: https://medium.com/@ger86/react-hooks-to-optimize-performance-2bb876b25d67

Cuando desarrollamos aplicaciones con React llega un momento en el que toca preocuparse acerca del rendimiento de la misma (cuanto antes mejor 😛). En general, en cuanto comenzamos a trabajar en el desarrollo de aplicaciones de tamaño medio, la optimización y el rendimiento suelen ser uno de los principales quebraderos de cabeza.

En este artículo y aprovechando la consolidación de los React Hooks quiero presentar un par de soluciones que pueden ayudar a evitar los dos problemas típicos que provocan un bajo rendimiento en las aplicaciones:

• Re-renders innecesarios.
• Cálculo computacional pesado en los componentes repetidas veces.

Gracias a los hooks useCallback y useMemo dispondremos de dos herramientas sencillas con las que prevenir algunos de los casos que provocan dichos problemas.

¡Vamos a verlos!

Re-renders innecesarios

Como sabréis, en el momento en que sucede un cambio en las props o el estado de un componente React provoca de forma automática un re-render de dicho componente.

Esto habitualmente es algo bueno y de hecho es la forma en que React trabaja. Sin embargo, algunas veces podemos “ayudar” a React en la tarea de decidir cuando forzar un re-render de cara a ahorrar algún que otro ciclo, pues como sabéis pintar en pantalla es una de las operaciones más costosas que una aplicación debe afrontar.

Nota. Si tenéis curiosidad cómo funciona el Virtual Dom de React os dejo un artículo que escribí hace un tiempo.

https://medium.com/@ger86/y-eso-del-virtual-dom-de-react-qué-es-3feed6366925

Una causa habitual de estos re-renders es pasar una nueva función a los componentes hijos cada vez que el componente cambia.

En este caso, estamos creando una función anónima cada vez que ComponentContainer se renderea, lo cual fuerza sí o sí al componente Component a renderearse ya que la propiedad (aunque la función haga lo mismo) ha cambiado (le estamos pasando un nuevo “objeto”).

Este re-render puede llegare a ser innecesario en el caso de que el dato subyacente no haya cambiado.

Para evitarlo podemos emplear el hook useCallback el cual “memoriza” la función y sólo vuelve a “reconstruirse” cuando una de las dependencias especificadas cambia:

De este modo, el component Component recibirá siempre el mismo callback para handleItemClick hasta el momento en que se produzca un cambio en los elementos item u onClick . Esto nos evitará re-renders innecesarios.

Cálculos costosos

Otra de las causas de tener un pobre rendimiento con React puede ser la complejidad de los cálculos realizados dentro de los componentes.

Es en estos momentos cuando el hook useMemo resulta especialmente útil ya que permite “memorizar” un valor de cara a obtenerlo siempre que lo necesitemos sin necesidad de volverlo a calcular hasta que las dependencias con las que fue calculado cambien.

Por ejemplo:

De este modo, nos ahorraremos recalcular la lista filtrada cada vez que el componente ListContainer se renderee hasta que las dependencias (en este caso la propiedad items ) cambien.

Conclusiones

Pese a haber sido un artículo bastante corto creo que este tipo de publicaciones ayudan a familiarizarse con herramientas como los hooks y a encontrar casos de uso que nos ayuden a resolver problemas a los que probablemente nos enfrentaremos cuando desarrollamos aplicaciones con React.

¡Espero que os haya servido!

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇