React.useEffect()

React.useEffect() tiene dos parámetros: el primero es una función siempre usada y el segundo es opcional y nos indica cuándo se ejecutará la primera función.

Los posibles valores para el segundo parámetro son:

• Ninguno

  Se ejecuta cada vez que hay cambios en cualquiera de los estados.

• Un arreglo vacío

  Se ejecuta solo una vez en el primer render del componente.

• Un arreglo no vacío

  Se ejecuta en el primer render y cuando hay cambios en los elementos del arreglo.

Código de la clase

import React from "react";

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

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

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

        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 && <p>Error: El código es incorrecto.</p>}
      {loading && <p>Cargando...</p>}

      <input placeholder="Código de seguridad" />
      <button onClick={() => setLoading(true)}>Comprobar</button>
    </div>
  );
}

export { UseState };

Archivos de la Clase

Efectos con useEffect

https://github.com/FROSTYLAN/SecurityApp/commit/3449f0317c941c8fd7fa3167f84e14ab06dac460