ReactJS componenteWillUnmount() Método

El método componentWillUnmount() nos permite ejecutar el código React cuando el componente se destruye o se desmonta del DOM (Document Object Model). Este método se llama durante la fase de desmontaje del ciclo de vida de React, es decir, antes de que se desmonte el componente.

Todas las limpiezas, como la invalidación de temporizadores, la cancelación de requests de red o la limpieza de suscripciones que se crearon en componentDidMount(), deben codificarse en el bloque de método componentWillUnmount().

Sugerencia: nunca llame a setState() en el método componentWillUnmount().

Sintaxis:

componentWillUnmount()

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app functiondemo

Paso 2: después de crear la carpeta de su proyecto, es decir, functiondemo, muévase a ella usando el siguiente comando:

cd functiondemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: en este ejemplo, vamos a crear una aplicación de color de nombre que cambia el color del texto cuando el componente se representa en el árbol DOM.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
class ComponentOne extends React.Component {
 
  // Defining the componentWillUnmount method
  componentWillUnmount() {
    alert('The component is going to be unmounted');
  }
 
  render() {
    return <h1>Hello Geeks!</h1>;
  }
}
 
class App extends React.Component {
  state = { display: true };
  delete = () => {
    this.setState({ display: false });
  };
 
  render() {
    let comp;
    if (this.state.display) {
      comp = <ComponentOne />;
    }
    return (
      <div>
        {comp}
        <button onClick={this.delete}>
          Delete the component
        </button>
      </div>
    );
  }
}
 
export default App;

 
 Nota: Puede definir su propio estilo en el archivo App.css .

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto: 

npm start

Producción: 

Referencia: https://reactjs.org/docs/react-component.html#componentwillunmount