Métodos del ciclo de vida de un componente

Código de la clase

import React from "react";

class ClassState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      **loading: false,**
    };
  }

  **componentDidUpdate() {
    console.log("Actualización");

    if (this.state.loading) {
      setTimeout(() => {
        console.log("Haciendo la validación");

        this.setState({ loading: false });

        console.log("Terminando la validación");
      }, 3000);
    }
  }**

  render() {
    return (
      <div>
        <h2>Eliminar {this.props.name}</h2>

        <p>Por favor, escribe el código de seguridad.</p>

        {this.state.error && <p>Error: El código es incorrecto.</p>}
        {this.state.loading && <p>Cargando...</p>}

        <input placeholder="Código de seguridad" />
        **<button onClick={() => this.setState({ loading: true })}>**
          Comprobar
        </button>
      </div>
    );
  }
}

export { ClassState };

Archivos de la Clase

Métodos del ciclo de vida en React.Component

https://github.com/FROSTYLAN/SecurityApp/commit/5f6a5eff9fa7a09a44f852fdb5fcf63dd11d8bc9

Lecturas Recomendadas

Qué es y cómo funciona un componente en React | Platzi Cursos

Ciclo de vida de un componente de React.js