¿Dónde actualizar el estado?

Para mi el sitio mas intuitivo y mas reutilizable es antes de “la peticion a la api”

useEffect(() => {
        console.log("Empezando el efecto");
        if (loading) {
            setError(false)
            setTimeout(() => {
                console.log("validando");
                if (value !== SECURITY_CODE) {
                    setError(true);
                }
                setLoading(false);
                console.log("Terminando de validar");
            }, 3000);
        }
        console.log("terminando el efecto");
    }, [loading]);

Buenos días,

La solución que yo implementé fue en el evento cambio del input texto, agregando una pequeña validación del estado del error, de este modo solo cambia el estado de error una sola vez y lo que más me gusta es que desaparece el texto de error automáticamente al escribir algo.

![](

Hay un problema con el ultimo metodo que utiliza el profesor, el error queda oculto mientras tenemos el estado de loading pero no se asegura que, en caso de introducir el codigo correcto, nuestro estado de error vuelva a ser falso y por tanto ya no se nos muestre mas, resultando en que una vez aparece el error por primera vez siempre se seguira mostrando cada vez que se termine de cargar incluso si el codigo fue correcto

Si por ejemplo estuviesemos verificando algo dentro del input como un regex, hay muchos que lo verifican en el onChange. Personalmente prefiero hacer esas verificaciones en el onBlur, que es analogo en react al onfocusout de html.

Yo lo haría de la siguiente forma

<input
	placeholder="Código de seguridad"
	onChance={(e) => {
		setError(false)
		setValue(e.target.value)
	}}
/>

Asi desde que el usuario comienza a escribir en el input el error desaparece

Con máquinas de estados se resuleven este tipo de problemas de manera elegante y escalable. xState, entre otros.

Una forma de hacerlo y en lo personal prefiero es:

useEffect(
 () => {
  if (loading) {
   setTimeout(() => {
    if (value !== SECURITY_CODE) {
     setError(true)
    }
    setLoading(false)
  }, 1000) }
 }, [ loading ] )

y luego en return usar:

{ loading ? 'Cargando...' : ( error ? 'Error :(' :null ) }

En ciertas ocasiones usar { loading && (algo) } al no cumplirse la lógica me renderiza un cero ya que estamos trabajando con lógica binaria básica, por eso prefiero el operador condicional.

Yo pense en la ultima forma xD

React.useEffect(() => {

        if (!!loading) {
            setError(false);
            setTimeout(() => {
                if (value !== SECURITY_CODE) {
                    setError(true);
                }
                setLoading(false);
            }, 3000);
        }
    }, [loading]);

Validación en la UI

{ (!loading && error) && (
    <p> El Código es incorrecto</p>
)}

Con la solución del profe se necesita agregar otra actualización de estado en el if, para que al agregar el código correcto el mensaje de error desaparezca. Con la solución del button creo que se realizan menos actualizaciones.

Queda un if más limpio:

if (value !== SECURITY_CODE) {
          setError(true);
        }
        setLoading(false);

Y se cambia sólo en el button:

<button
        onClick={() => {
          setLoading(true);
          setError(false);
        }}
      >
        Comprobar
      </button>

  if(value === SECURITY_CODE){
                setLoading(false);
                setError(false);
            }else{
                setError(true);
                setLoading(false);
            }
Y AQUI COLOQUE

<button onClick={()=>{
            setLoading(true);
            setError(false);
                }} >
                soy butun
            </button>

otra sitio sería justo antes del setTimeOut, es decir, justo cuando iniciamos la “petición a la API”

useEffect(() => {
        if(!!loading){
        setError(false)
        setTimeout(() => {
            setError(!(value === SECURITY_CODE))
            setLoading(false)
        }, 500)
       }
    }, [loading])

Dato de vital importancia esperado por toda latino america unida y el Caribe:
Para que la solucion del profesor funcione debes tener este pedado de codigo asi:

if(value === SECURITY_CODE){
                    setLoading(false);
                    setError(false); // esto es importante para que funcione como espereamos
                }else{

Se podría agregar en los siguientes bloques de código

  const onChangeHandle = (event) => {
    setError(false);
    setValue(event.target.value);
  };

  const onClickHandle = () => {
    setError(false);
    setLoading(true);
  };

  useEffect(() => {
    setError(false);
  }, [value]);

Código completo
Repo
Proyecto

Les dejo mi solución.

const SECURITY_CODE = 'paradise';

const UseState = ({ name }) => {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!!loading) {
      setTimeout(() => {
        if (value === SECURITY_CODE) {
          setError(false);
        } else {
          setError(true);
        }
        setLoading(false);
      }, 3000);
    }
  }, [loading, value]);

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

      {loading ? <Loading /> : error && <p>Error: incorrect code</p>}

      <input
        type='text'
        placeholder='security code'
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onFocus={() => setError('')}
      />
      <button onClick={() => setLoading(true)}>Check</button>
    </div>
  );
};

export { UseState };