¿Sabes qué es y cómo funciona ComponentDidMount en React? React es una librería JavaScript muy popular en el mundo de este lenguaje de programación; de hecho, ocupa el segundo puesto en popularidad después de JQuery. Esta librería es mundialmente conocida por mezclar el poder del código JavaScript con el de HTML, facilitando el proceso de desarrollo de SPA.
Para ello, React ha creado componentes y hooks. Aquí, existen dos tipos de componentes: aquellos declarados con arrow functions (componentes de tipo función) y aquellos declarados con class (componentes de tipo clase). En este post, te enseñaremos qué es el método ComponentDidMount en React, una función importante para controlar el ciclo de vida de componentes de tipo clase.
¿Qué es ComponentDidMount en React?
Antes de hablar acerca de componentDidmount in React, recordamos todo sobre React y sus componentes. En nuestro post sobre estado y ciclo de vida de componentes en React, te hemos explicado que, antes de que existieran los diversos hooks de esta librería, los componentes de tipo clase tenían una serie de métodos que controlaban su ciclo de vida. Estos métodos nos permitían definir en qué momento del ciclo ejecutar determinadas secciones de código, si en su montada, actualizada o desmontada.
Ten en cuenta que los métodos para controlar el ciclo de vida de un componente declarado con la palabra clave class todavía se pueden usar en React. Sin embargo, como lo puedes leer en el artículo introducing hooks de reactjs.org, esta librería intenta moverse lejos de la clase. Por ello, se han creado los hooks, útiles cuando manejamos componentes de tipo función, como el de componentDidmount.
ComponentDidMount in React
ComponentDidMount en React es uno de los métodos que podemos usar para manipular el ciclo de vida de un componente de tipo clase. Este método funciona de un modo similar al hook useEffect en React. Es decir, se ejecuta justo después del primer render de nuestro componente. Como su nombre indica, el rol de ComponentDidMount en React es avisar de que el componente ya se ha montado en el DOM.
Dentro de este método, podemos meter el código que queramos o simplemente no hacer nada. Este código siempre se ejecutará después del primer render. Es decir, será el tercer paso cuando React esté renderizando un componente de tipo clase; primero ejecuta el constructor, luego el render y, finalmente, el componentDidMount.
Si quieres ver este procesode componentDidmount in React por ti mismo, te invitamos a usar el debugger del inspector del navegador. Con esta herramienta podrás ver el orden en el que se ejecutan las líneas de código de tu componente.
¿Cómo funciona ComponentDidMount en React?
El método ComponentDidMount en React funciona igual que cualquier otro método. Para ejecutarlo, basta con insertarlo dentro de nuestro componente de tipo clase. Este método es un buen sitio para meter acciones, como una llamada a la API.
Para enseñarte cómo funciona ComponentDidMount en React, te pondemos un ejemplo basado en un hook useEffect. Supongamos entonces que tenemos el siguiente efecto, que es responsable de llamar a nuestra API con la función getLatestTweets:
useEffect (( ) => {
const execute = async ( ) => {
const tweets = await.getLatestTweets ( );
setTweets (tweets);
};
execute ( );
}, [ ];
Ahora, para pasar estas acciones a un ComponentDidMount podríamos guardarlas dentro de una función que se encargue de manejarla. Un ejemplo sería crear una función handleGetLatestTweets y guardar en ella lo que estaba en useEffect. Esta sería la función que pasaríamos por el componente una vez se haya renderizado por primera vez.
A continuación, te mostramos cómo le pasamos esta función a nuestro método componentDidMount en React:
componentDidMount ( ) {
this.handleGetTweet ( );
}
De esta manera, has aprendido acerca de componentDidmount en react.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el componentDidMount en React, seguro que quieres seguir aprendiendo sobre las distintas posibilidades que nos da esta librería JavaScript. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas y lenguajes de programación para la web, como React, Babel, JavaScript, HTML, CSS y webPack. ¿Quieres seguir aprendiendo para darle un giro a tu perfil profesional? ¡Solicita más información!
