why my timer component is not working as a timer its time is not reducing - reactjs

Question

i have a timer which shows the timer based on the time left by comparing it from now to the time received from server and shows timer what i have done is below, received time is the string like "2020-09-02T05:09:56.119Z" now i want the time to be the difference between time received from server and the time now but my timer is showing two times only as shown in the below gif
Link to the problem timer
import React, {useState, useEffect} from 'react';
import {Box, Message, Video, Timer, BlueScreen, Emoji, Heading, SubHeading, WaitingImage} from './styled' ;
import Button from 'Components/Button';
import { getAPatient } from '../api';
import moment from 'moment';
export default function WaitingRoom(){
const { t } = useTranslation();
const [timeLeft, setTimeLeft] = useState();
const url = window.location.href.split('?id=');
const id = url[1];
const geTimerTime = async () => {
await getAPatient(id)
.then((info) => {
const datetime = info && info.data.datetime;
const currentTime = moment().toISOString()
const d1 = new Date(currentTime);
const d2 = new Date(datetime);
const difference = d1 - d2;
if (difference > 60e3){
const minutes = Math.floor(difference / 60e3);
const seconds = minutes * 60;
setTimeLeft(seconds)
}
else {
const seconds = Math.floor(difference / 1e3);
setTimeLeft(seconds)
}
console.log(currentTime, datetime,difference,"infopoooo")
})
.catch((err) => {
console.log(err)
});
}
useEffect(() => {
geTimerTime()
if (!timeLeft) return;
}, [timeLeft]);
return(
timeLeft === 0 ?
<BlueScreen>
<Emoji>
<Smiley />
</Emoji>
<Heading>
{t('turnMessageHeading')}
</Heading>
<SubHeading>
{t('turnMessageSubHeading')}
</SubHeading>
<SubHeading>
{t('turnMessageSubHeadingDoctor')}
</SubHeading>
<Button
themeWhite
>
{t('commingMessage')}
</Button>
</BlueScreen>
:
<Box>
<Button
themeBlue
width={'100%'}
textAlign={'left'}
>
{t('Virtual_waiting_room')}
</Button>
<Message>
{t('waiting_message')}
</Message>
<Timer>
<div>{Math.floor(timeLeft/60) + ':' + ('0' + Math.floor(timeLeft % 60)).slice(-2)}</div> minutes
</Timer>
<WaitingImage>
<Waiting />
</WaitingImage>
<Video>
<iframe src='https://www.youtube.com/embed/gaka1vqYFNs'
frameborder='0'
allow='autoplay; encrypted-media'
allowfullscreen
title='video'
width={"100%"}
/>
</Video>
</Box>
)
}

Answer 1

It is simply because you call setTimeLeft, which sets the state for timeLeft, which in react triggers a re-render, during which all the useEffect() hooks will run, except for those that are not listening to changes on a state variable.
Furthermore, you have timeLeft in the dependency array (the second parameter in the hook), which means this useEffect() will run on every re-render where timeLeft state was set, thus running on each iteration.
If you need your useEffect() to run like componentDidMount, you need to keep an empty dependency array, thus ensuring the hook only runs on initial render
useEffect(() => {
geTimerTime()
if (!timeLeft) return;
}, []);//empty dependency array to mimic componentDidMount

Answer 2

useEffect's set state Function should not match the second parameter. The useEffects is run whenever any data inside the second parameter's array is changed. Since you are changing the timeLeft inside the useEffects it will run infinitely. If you want to do geTimerTime anyway and have the timeLeft inside the dependency array(second parameter to useEffect) then you can do like below
useEffect(() => {
if (timeLeft) {
geTimerTime();
}
}, [timeLeft])