Una función useEffect
siempre sucederá después de que el componente reactJS se haya renderizado, pintado o devuelto (render/re-render) en el navegador.
En la documentación de reactJS se puede leer lo siguiente:
¿Se ejecuta useEffect después de cada renderizado? ¡Sí! Por defecto se ejecuta después del primer renderizado y después de cada actualización.
Entonces, estamos seguros de que useEffect
se va a ejecutar por lo menos una vez y que además, ReactJS va a retrasar la ejecución de esta función useEffect
hasta que el componente se haya "renderizado".
Lo que se puede hacer en este caso es controlar el comportamiento de useEffect
.
Lógica dentro de useEffect
En este caso se puede usar lógica, para controlar cuando se puede hacer la llamada API
, manejando el estado de la bandera consultar
, una vez que ReactJS haya "renderizado" el componente Formulario
:
useEffect(()=>{
if(consultar){
Re().then((resultadoapi)=>{settemperatura(resultadoapi)})
} else {
console.log("consultar es false, no API call")
}
},[consultar]);
Devolver función Cleanup useEffect
Luego, se configura useEffect
para regresar una función de Cleanup,
esta función se va a encargar de regresar el estado consultar
a false
, cada que el componente Formuario
se desmonte.
useEffect(()=>{
if(consultar){
Re().then((resultadoapi)=>{settemperatura(resultadoapi)})
} else {
console.log("consultar es false, no API call")
}
// cleanup
return () => setconsulta(false);
},[consultar]);
Como se mencionó anteriormente, useEffect
se dispara siempre, por lo menos una vez;
Ahora bien, en este caso en particular para que useEffect
se dispare en posteriores re-renders, el estado consultar
debe cambiar su valor, pues esta listado en las dependencias del efecto.
Si no se regresa la bandera consultar
a false
, su estado se quedará con el valor de true
y por lo tanto, el efecto ya no se ejecutará en posteriores renderizados. Por eso la necesidad de usar la función cleanup.
Espero que esta respuesta sea de ayuda.
Agregar()
, el estadoconsultar
pasa de serfalse
a sertrue
. Pero la segunda vez que llamas a esa misma función, ese estado va a intentar volver a setearse atrue
y como ya tenía ese valor de antes, entonces es muy probable que eluseEffect()
no detecte cambios y por lo tanto no vuelva a consumir la API.consultar
nunca cambia atrue
? Si es así entonces puede haber algún problema con la funciónAgregar()
. Tal vez no se está ejecutando bien. ¿En qué momento la estás llamando?useEffect()
se ejecute por sí mismo la primera vez. Pero, ¿cuál es el comportamiento que estás buscando? ¿que la consulta a la API se ejecute solo cuando cambia el estadoconsultar
? Si por alguna razón forzosamente tendría que ser así, quizás podría servirte poner la consulta a la API dentro de la funciónAgregar()
para que se ejecute solo si llamas a esa función. Aunque personalmente no creo que esa sea la mejor opción. Pienso que lo ideal sería que sigas el consejo de @g.4 .