Запрос к API по условию (хуки)

Компонент использует условный рендеринг. При отправке формы (компонент Block) отправляется POST запрос на сервер и затем запускается таймер. По истечении времени таймера опять рендерится форма (Block).

Каждые 5 секунд компонент отправляет GET запрос. Из-за этого у меня таймер подлагивает каждые 5 секунд.

Подскажите, как сделать запрос к API когда таймер не запущен и прекращать запрос, когда таймер срабатывать. Ну и соответственно после истечении времени опять возобновить запросы.

Мой код

function Queue() {

const calculateTimeLeft = () => {

    const stamp = blockData.stamp;
    const getDate = new Date(stamp);
    let minutes = getDate.getMinutes();
    getDate.setMinutes(minutes + blockData.duration);

    const difference = +new Date(getDate) - +new Date();
    let timeLeft = {};
    if (difference > 0) {
        timeLeft = {
            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
            minutes: Math.floor((difference / 1000 / 60) % 60),
            seconds: Math.floor((difference / 1000) % 60)
        };

    }
    return timeLeft;

};

const [blockData, getBlockDate] = useState([]);
const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

useEffect(() => {
    const timer = setTimeout(() => {
        setTimeLeft(calculateTimeLeft());
    }, 1000);

    return () => clearTimeout(timer);
});

useEffect(() => {
    function getBlock() {
        axios.get(URLs.baseUrl + URLs.block, { headers: authHeader() })
            .then(res => {
                console.log(res);
                getBlockDate(res.data);
            })
            .catch(err => {
                console.log(err);
            })
    }
    getBlock();
    const interval = setInterval(() => getBlock(), 5000);
    return () => {
        clearInterval(interval);
    }

}, []);


const timerComponents = [];

Object.keys(timeLeft).forEach((interval, index) => {
    if (!timeLeft[interval]) {
        return;
    }
    timerComponents.push(
        <span key={index}>{timeLeft[interval]} {" "}</span>
    );
});

return (
    <React.Fragment>
   
            <div className="form__block">
                {timerComponents.length ? timerComponents : <Block/>}
            </div>

        </div>
    </React.Fragment>
);
}

Ответы (0 шт):