ComponentDidUpdate en React

Autor: | Última modificación: 29 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

¿Sabes qué es y cómo funciona el método ComponentDidUpdate en React? React es una librería JavaScript conocida por simplificar la forma en la que escribimos código para desarrollar interfaces de usuario interactivas en SPA o single page application. Para ello, React ha creado lo que llama componentes, elementos que podemos declarar de dos maneras: a través de la palabra clave class para declarar componentes de tipo clase o a través de las arrow functions para declarar componentes de tipo función.

En este post, te enseñaremos qué es y cómo funciona el ComponentDidUpdate en React, un método para controlar el estado de vida de componentes tipo clase.

¿Qué es el ComponentDidUpdate en React?

El ComponentDidUpdate en React es uno de los métodos que nos permiten modificar el ciclo de vida de un componente de tipo clase. Como puedes leer en nuestro post sobre estado y ciclo de vida de componentes en React, estos métodos nos permiten definir en qué momentos se ejecutan las distintas secciones de código de nuestro componente.

El método ComponentDidUpdate es el método que le sigue al ComponentDidMount en React. Es decir, mientras que el ComponentDidMount se ejecuta después del primer render, el ComponentDidUpdate se ejecuta justo después de que el estado cambie y se provoque un nuevo render. Por ello, como su nombre indica, este método se refiere a la actualización de estado. En este sentido, este método solo se ejecuta si se produce un nuevo estado en React desde nuestro componente, cambio que produce un nuevo render.

¿Cómo funciona el ComponentDidUpdate en React?

El método ComponentDidUpdate en React funciona de una manera muy similar a los demás métodos. Es decir, se declara fuera del método render de nuestro componente de la siguiente manera:

componentDidUpdate ( ) { }

Dentro de este método de ciclo de vida, podemos ejecutar el código que queramos. Podemos, por ejemplo, pintar una palabra en pantalla:

componentDidUpdate ( ) {

console.log (‘updated’)

}

Un elemento particular del método ComponentDidUpdate es que recibe dos parámetros diferentes: prevProps y prevState. El parámetro prevProps se refiere a las propiedades antiguas del componente, mientras que el prevState se refiere al estado antiguo antes de renderizar.

Aunque el método de ciclo de vida recibe estos parámetros, podemos acceder a las props nuevas y al estado nuevo desde los comandos this.props y this.state, respectivamente. Estos comandos complementarios nos permiten comprobar si han cambiado los parámetros o no.

Para comprobar exactamente cómo funcionan estos parámetros del método ComponentDidUpdate, podrías ejecutar un console.log de cada grupo de parámetros.

componentDidUpdate (prevProps, prevState) {

console.log (‘old’, prevProps, prevState);

console.log (‘new’, this.props, this.state);

}

Una vez tienes escrito este código, puedes inspeccionarlo desde el inspector de tu navegador. Allí, en la sección console, verás dos objetos en orden old, new. En el primer objeto, podrás desplegar las flechas para ver las props antiguas y el estado antiguo. Luego, dentro de new, podrás ver las props nuevas y el estado nuevo. De esta manera, podrás comprobar qué ha cambiado al ejecutar determinada acción en tu aplicación.

Recuerda que el comando this en React puede ser confuso. Ten en cuenta que, cuando llames a this.state estarás llamando al estado que se ha creado con this.State dentro del componente. En este orden de ideas, el cambio que veas en tu navegador será el ejecutado por this.setState.

El comando this.setState nos permite modificar el estado en un componente de tipo clase en React. Es decir, funciona de manera similar a la función set que pasamos como parámetro al crear un estado en un componente de tipo función. Para aprender más sobre este tema, te recomendamos leer nuestros posts sobre declarar estado en un componente clase de React y modificar estado desde un componente clase en React.

¿Quieres seguir aprendiendo?

Ahora que sabes qué es y cómo funciona el método ComponentDidUpdate en React, te invitamos a que sigas aprendiendo sobre las distintas posibilidades que nos trae esta poderosa librería de JavaScript. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web. ¡No esperas más para pedir información y atrévete a dar el paso que te cambiará la vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!