Member-only story
React Hooks para optimizar el rendimiento
Guía de uso de los hooks useMemo y useCallback para incrementar el rendimiento de nuestras aplicaciones
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.
