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.