Código de la clase

import React from "react";

const SECURITY_CODE = "paradigma";

function UseState({ name }) {
  **const [state, setState] = React.useState({
    value: "",
    error: false,
    loading: false,
  });**

  console.log(**state**);

  React.useEffect(() => {
    console.log("Empezando el efecto");

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

        **if (state.value === SECURITY_CODE) {
          setState({ ...state, error: false, loading: false });
        } else {
          setState({ ...state, error: true, loading: false });
        }**

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

    console.log("Terminando el efecto");
  }, [**state.loading**]);

  return (
    <div>
      <h2>Eliminar {name}</h2>

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

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

      <input
        placeholder="Código de seguridad"
        **value={state.value}
        onChange={(event) => {
          setState({ ...state, value: event.target.value });
        }}**
      />
      <button
        onClick={() => {
          **setState({ ...state, loading: true });**
        }}
      >
        Comprobar
      </button>
    </div>
  );
}

export { UseState };

Archivos de la Clase

Estados compuestos con useState

https://github.com/FROSTYLAN/SecurityApp/commit/6ac4a6e4db11c6a0a366006ca2ece2c767def78f

Lecturas Recomendadas

Why you should consider using Objects more in React/Redux

Estados compuestos con React.Component

Estados imperativos con UseState