Código de la clase

import React from "react";

const SECURITY_CODE = "paradigma";

function UseState({ name }) {
  const [value, setValue] = React.useState("");
  const [error, setError] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  console.log(value);

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

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

        **if (value === SECURITY_CODE) {
          setError(false);
        } else {
          setError(true);
        }**

        setLoading(false);

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

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

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

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

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

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

export { UseState };

Archivos de la Clase

¿Dónde actualizar el estado?

https://github.com/FROSTYLAN/SecurityApp/commit/cd916c114e7a5a21f35288901141e00f392b4e65

Estados independientes con useState

Estados compuestos con React.Component