¿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!
