Los componentes de clase en React tienen la capacidad de hacer lo mismo que los componentes de tipo función. Sin embargo, para lograrlo deben recorrer otros caminos. El equivalente a los hooks para un componente de tipo clase son los métodos de ciclo de vida. En este post, te enseñaremos qué es y cómo funciona el método ComponentWillUnmount en React, ideal para ejecutar acciones de limpieza.
¿Qué es ComponentWillUnmount en React?
ComponentWillUnmount en React es uno de los métodos disponibles en esta librería de JavaScript para manipular el ciclo de vida de componentes de tipo clase. Para conocer más sobre los demás componentes que nos permiten hacer esto, te recomendamos leer nuestro post sobre estado y ciclo de vida de componentes en React.
Como todos los métodos de este tipo, el ComponentWillUnmount en React nos permite insertar una sección de código para que se ejecute en un momento específico. Esta función en particular hace que la sección de código se ejecute cuando el componente se va a desmontar del DOM.
Ten en cuenta que un componente se desmonta cada vez que pasamos a otra página. Es decir, en una red social, un componente de login que pinta un botón “iniciar sesión” se desmonta una vez el usuario entra a la aplicación. Dependiendo de lo eficiente que sea tu código, hay momentos en los que un componente repetido en nuestra aplicación incluso se desmonta y vuelve a montarse con cada navegación.
El método ComponentWillUnmount en React es muy útil para detener acciones que están repetidas en un bucle. Por ejemplo, una acción que está programada con el método setInterval seguirá corriendo incluso cuando el componente se desmonte del DOM. Entonces, podremos usar ComponentWillUnmount para eliminar este método.
Más allá de eliminar o detener un método setInterval, este método es muy útil para ejecutar tareas de limpieza en general. Es decir, toda función que necesitamos borrar una vez sea ejecutada en nuestro componente.
Puedes conocer más sobre acciones programadas para ser repetidas en nuestro post sobre métodos setTimout y setInterval en JavaScript.
¿Cómo funciona ComponentWillUnmount en React?
El método ComponentWillUnmount se escribe igual que los demás métodos de ciclo de vida. Esto significa que se pueden escribir fuera del método render del componente de tipo clase que hemos creado. Dentro de este método podemos escribir cualquier línea de código. En el siguiente ejemplo, escribimos en pantalla una palabra con el comando console.log:
componentWillUnmount ( ) {
console.log (‘unmount’);
}
Aunque se declara de este manera, este método se parece bastante a la función que se puede retornar en un hook useEffect en los componentes de tipo función. A continuación, te mostramos un ejemplo de un código escrito con este hook:
useEffect (() => {
const execute = async ( ) => {
const tweets = await getLatestTweets ( );
setTweets (tweets);
};
execute ():
return ( ) => {
}
}, [ ]);
No es necesario que entiendas el código anterior. Lo que te queremos mostrar es que la función return escrita anteriormente se ejecuta justo cuando el componente se va a desmontar.
Para que el return de un hook useEffect funcione de esta manera, debemos insertar como segundo parámetro un array vacío. Este símbolo indicará que el hook useEffect se ejecutará después del primer render, como lo haría el ComponentDidMount en React. En estos casos, el return es equivalente al ComponentWillUnmount.
¿Qué sigue?
Ahora que sabes qué es y cómo funciona el método ComponentWillUnmount en React para manipular el ciclo de vida de un componente de tipo clase, ¡ha llegado el momento de utilizarlo en tus propios proyectos! Los profesores de KeepCoding, expertos en este sector, te acompañan en este proceso gracias al Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva que combina la teoría y y la práctica del desarrollo web. ¿Estás pensando en cambiar tu vida y desarrollarte en el sector IT? ¡Solicita más información y no te pierdas esta oportunidad!
