React.js中如何设置首次0秒执行、后续间隔30秒的setInterval定时器

核心实现逻辑：setInterval默认首次触发会等待设定的间隔时长，因此只要在启动定时器之前，先手动执行一次目标接口请求函数，即可实现首次0延迟的效果。

直接适配你原有逻辑的修改代码 #

//this is my state 
const [state, setState] = useState();
useEffect(() => {
    // 新增：先手动执行一次，实现首次0延迟触发
    APiResponse();
    const interval = setInterval(() => {
      APiResponse();
    }, 30000);
    return () => clearInterval(interval);
}, []);

const APiResponse = () => {
    axios.get(`xxx`).then((res) => {
      setState(res);
    });
};  

可选优化方案（避免请求堆叠） #

如果存在接口响应速度慢、可能超过30秒的场景，使用固定间隔setInterval会出现多个请求并发堆叠的问题，推荐改用递归setTimeout的方案，保证上一次请求完成后再间隔30秒发起下一次请求：

const [state, setState] = useState();
useEffect(() => {
    let timer = null;
    const fetchData = async () => {
        try {
            const res = await axios.get(`xxx`);
            setState(res);
        } catch (err) {
            // 可自行补充错误处理逻辑
            console.error('接口请求失败', err);
        } finally {
            // 请求完成后设置下一次触发定时器
            timer = setTimeout(fetchData, 30000);
        }
    };
    // 首次0延迟调用
    fetchData();
    // 组件卸载时清除定时器避免内存泄漏
    return () => clearTimeout(timer);
}, []);

内容的提问来源于stack exchange，提问作者Ahsan Hafeez