React Hooks para optimizar el rendimiento

Guía de uso de los hooks useMemo y useCallback para incrementar el rendimiento de nuestras aplicaciones

Gerardo Fernández
4 min readOct 3, 2019

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

--

--

Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React