Establezca una variable de temporizador en un método setTimeOut sobre su método a cero para que una vez que se represente el componente, se llamará al ciclo de vida useEffect y después de hacer su llamada, configúrelo para lo que necesite;

 let interval; setTimeout(()=>{ APiResponse(); // first time zero interval = setInterval(() => { APiResponse(); // after 30 second } , 30000); }, 0)

Puede usar un setTimeout por primera vez. Luego, con una variable de estado de bandera que se actualiza después del primer renderizado, puede comenzar su intervalo.

 const [state, setState] = useState(); const [flag, setFlag] = useState(false); useEffect(() => { const interval = setTimeout(() => { APiResponse(); }, 0); `enter code here`; }); useEffect(() => { if(flag === true){ const interval = setInterval(() => { APiResponse(); }, 30000); return () => clearInterval(interval); } },[flag]); const APiResponse = () => { setFlag(true); axios.get(`xxx`).then((res) => { setState(res); }); };

Puede usar el código a continuación, la idea es invocar la función de devolución de llamada setInterval inmediatamente por intervalos de una vez y 30 segundos después de eso. Tenga en cuenta que es un IIFE. por lo que no empujará a la cola de tareas, sino que se activará inmediatamente (sin demora).

 const [state, setState] = useState(); useEffect(() => { const interval = setInterval( (function callApi() { APiResponse(); return callApi; })(), 30000 ); return () => clearInterval(interval); }, []); const APiResponse = () => { axios.get(`xxx`).then((res) => { setState(res); }); };

He llamado a la función callApi . El return callApi; line devuelve la misma función, podemos llamarla inmediatamente y usarla como una función de devolución de llamada para setInterval .