I have a problem.

When I use interval to call my api again, one of 30 seconds and another of 14 seconds in the first instance it works fine, but later it works like the image, when it should show the following.

Clear A (14 sec) Clear A (14 sec) Clear B (30 sec) Clear A (14 sec) Clear A (14 sec) Clear B (30 sec) Clear A (14 sec) Clear A (14 sec) Clear B (30 sec) Clear A (14 sec) Clear A (14 sec) Clear B (30 sec) ....... This is my code.

    useEffect(() => {
    let exchange = []
    const fetchExchange = async () => {
        const binance = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/binance`)
        const dataBinance = await binance.json()

        const bybit = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bybit`)
        const dataBybit = await bybit.json()

        const okex = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/okex`)
        const dataOkex = await okex.json()

        const bitget = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bitget`)
        const dataBitget = await bitget.json()

        const bingx = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bingx`)
        const dataBingx = await bingx.json()
        exchange.push(dataBinance, dataBybit, dataOkex, dataBitget, dataBingx)
        setExchangeData(exchange)
    }

    const FetchGasTracker = async () => {
        const gas_tracker = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/home/fear_greed`)
        const dataGasTracker = await gas_tracker.json()
        setGasTracker(dataGasTracker[0])
    }
    let a = setInterval(() => {
        let date = new Date()
        FetchGasTracker()
        console.log(' Clean a', date.toLocaleTimeString());
        clearInterval(a)
    }, 14000);
    let b = setInterval(() => {
        let date = new Date()
        fetchExchange()
        console.log('Clean B', date.toLocaleTimeString())
        clearInterval(b)
    }, 30000);
}, [exchangeData, gasTracker])

Display this process

CodePudding user response：

You have [exchangeData, gasTracker] as your effect deps array which means every time your code sets either exchangeData or gasTracker, new intervals are registered. This means you likely get more and more timers set ad infinitum since your affect runs setGasTracker and setExchangeData so that will then cause the affect to run again, which will cause more timers etc.

Did you mean to just use [] as the deps array and then allow your interval to run without clearing (you should only clear them in the unmount function, which ive also edited in below)?

    useEffect(() => {
    const fetchExchange = async () => {
        const [dataBinance, dataBybit, dataOkex, dataBitget, dataBingx ] = await Promise.all([
        
   fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/binance`).then(res => data.json()),
   fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bybit`).then(res => data.json()),
   fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/okex`).then(res => data.json()),
   fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bitget`).then(res => data.json()),
   fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bingx`).then(res => data.json()),

        ])

        setExchangeData([dataBinance, dataBybit, dataOkex, dataBitget, dataBingx])
    }

    const FetchGasTracker = async () => {
        const gas_tracker = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/home/fear_greed`)
        const dataGasTracker = await gas_tracker.json()
        setGasTracker(dataGasTracker[0])
    }
    let a = setInterval(() => {
        let date = new Date()
        FetchGasTracker()
        console.log(' Clean a', date.toLocaleTimeString());
    }, 14000);
    let b = setInterval(() => {
        let date = new Date()
        fetchExchange()
        console.log('Clean B', date.toLocaleTimeString())
    }, 30000);

    return () => {
       clearInterval(a)
       clearInterval(b)
    }
}, [])