React. 5 Consejos para evitar “wasted renders”

5 técnicas para evitar los wasted renders de React y optimizar tu aplicación

Uno de los principales problemas a los que nos tenemos que enfrentar cuando intentamos optimizar el rendimiento de nuestras aplicaciones en React son los llamados wasted renders, es decir, renders de componentes cuyo estado interno no ha cambiado pero que debido a la forma en que funciona React son rendereados de nuevo durante el proceso de reconciliación del Virtual DOM con el DOM “real”.

En este artículo veremos algunas de las técnicas que podemos emplear para prevenirlos a la vez que profundizamos en la forma en que funciona React, de cara a ampliar nuestro conocimiento sobre esta librería. ¡Vamos allá!

Virtual DOM

Como ya os comentaba en un artículo anterior, React emplea el concepto de Virtual DOM con el fin de optimizar el proceso de pintar la interfaz gráfica de nuestra aplicación en función del estado que tenga en ese momento.

Para ello, React parte de un componente raíz a partir del cual se despliega todo el árbol de componentes, entendiendo como “componente” una función que renderiza una porción de la interfaz gráfica basada en los datos que posea, es decir, su estado y las props que reciba de su componente padre.

A medida que los usuarios interactúan con la interfaz gráfica (pulsaciones de botones que desencadenan llamadas AJAX, transiciones entre páginas, formularios…) se producen cambios en esos datos que provocan que la interfaz gráfica deba actualizarse para reflejarlos. Es decir:

El usuario no provoca directamente cambios en la interfaz gráfica sino en los datos / estado de la aplicación. Esos cambios son los que desencadenan la actualización de la interfaz gráfica.

A este respecto, es importante interiorizar que cuando hablamos de datos no sólo nos referimos a aquello que guardamos en la base de datos, sino también a todo lo asociado al estado de la interfaz gráfica (por ejemplo, la pestaña que está seleccionada o la slide que se está mostrando). De este modo, cuando cualquier parte de estos datos cambia, React calcula las diferencias entre la versión actual de la interfaz gráfica y la nueva en el Virtual DOM para…