2

Estoy trabajando en react usando hooks, uso useEffect para hacer un llamado a la API cada 80 segundos con ayuda de setinterval funciona muy bien, pero necesito que el primer llamado sea más rapido y despues del primer llamado ahora si se mande llamar cada 80 segundos

¿Como puedo hacer que el primer llamado no sea hasta depues de los 80 segundos?

  const getDatos = async () => {
    try{
       return await  axios.get(`localhost:3000/api/datos`)        
          .then(function(response){             
             return response;
          }).then(function(response) {
             setDatos(response.data.data);
          })       
          .catch(function(error) { 

             console.log('error catch', (error))
          });
     }catch(error) { 
       console.log('error en datos', error)
    }
 } 

  useEffect(() => {   
    const interval=setInterval(()=>{       
    getDatos();
  },80000)
  return()=>clearInterval(interval)
  }, [])

2 respuestas 2

1

Es posible que sea algo como llamar por primera vez la función sin el interval, declarando una variable ya sea en tu componente de función o en tu clase, y le cambias el valor una única vez.

let haveData = false;
useEffect(()=>{
    if(!haveData) {
        getDatos();
        haveData = true;
    }
    const interval=setInterval(()=>{
        getDatos();
    },80000)
    return()=>clearInterval(interval)
},[])

Otra opción y creo que sería la mejor es utilizando el ciclo de vida del componente, en donde declaramos el componentDidMount el cual se ejecuta apenas carga el component

componentDidMount() {
    getData();
}
0

Se puede crear un nuevo Hook useEffect y configurarlo para que corra solo una vez en su primer render, que sería el primer llamado:

useEffect(()=>{
        console.log("run effect only on first render");
        getData();
  }, []);

Luego seguiría el Hook que ya tienes con el intervalo.

Lo que comenta el colega @Jesus Daniel, con componentDidMount() es la mejor opción si estas usando sintaxis Class.

Actualización.

Esta es una forma corta de declarar el useEffect que va a correr solo una vez:

useEffect(getData,[]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.