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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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