OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Implementing a countdown timer in React with Hooks

  • Thread starter Thread starter niinja no
  • Start date Start date
N

niinja no

Guest
I am trying to render a count down timer on screen with react hooks, but I am not sure what is the best way to render it.

I know I am supposed to use the useEffect to compare current state to previous state, but I do not think I am doing it correctly.

I would appreciate the help!

I have tried a couple of different ways, none of them work, like setting a state whenever it updates, but it just ends up flickering like crazy.

Code:
const Timer = ({ seconds }) => {
    const [timeLeft, setTimeLeft] = useState('');

    const now = Date.now();
    const then = now + seconds * 1000;

    const countDown = setInterval(() => {
        const secondsLeft = Math.round((then - Date.now()) / 1000);
        if(secondsLeft <= 0) {
            clearInterval(countDown);
            console.log('done!');
            return;
        }
        displayTimeLeft(secondsLeft);
    }, 1000);

    const displayTimeLeft = seconds => {
        let minutesLeft = Math.floor(seconds/60) ;
        let secondsLeft = seconds % 60;
        minutesLeft = minutesLeft.toString().length === 1 ? "0" + minutesLeft : minutesLeft;
        secondsLeft = secondsLeft.toString().length === 1 ? "0" + secondsLeft : secondsLeft;
        return `${minutesLeft}:${secondsLeft}`;
    }

    useEffect(() => {
        setInterval(() => {
            setTimeLeft(displayTimeLeft(seconds));
        }, 1000);
    }, [seconds])
    

    return (
        <div><h1>{timeLeft}</h1></div>
    )
}

export default Timer;```

<p>I am trying to render a count down timer on screen with react hooks, but I am not sure what is the best way to render it.</p>
<p>I know I am supposed to use the <code>useEffect</code> to compare current state to previous state, but I do not think I am doing it correctly.</p>
<p>I would appreciate the help!</p>
<p>I have tried a couple of different ways, none of them work, like setting a state whenever it updates, but it just ends up flickering like crazy.</p>
<pre><code>

const Timer = ({ seconds }) => {
const [timeLeft, setTimeLeft] = useState('');

const now = Date.now();
const then = now + seconds * 1000;

const countDown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
if(secondsLeft <= 0) {
clearInterval(countDown);
console.log('done!');
return;
}
displayTimeLeft(secondsLeft);
}, 1000);

const displayTimeLeft = seconds => {
let minutesLeft = Math.floor(seconds/60) ;
let secondsLeft = seconds % 60;
minutesLeft = minutesLeft.toString().length === 1 ? "0" + minutesLeft : minutesLeft;
secondsLeft = secondsLeft.toString().length === 1 ? "0" + secondsLeft : secondsLeft;
return `${minutesLeft}:${secondsLeft}`;
}

useEffect(() => {
setInterval(() => {
setTimeLeft(displayTimeLeft(seconds));
}, 1000);
}, [seconds])


return (
<div><h1>{timeLeft}</h1></div>
)
}

export default Timer;```
</code></pre>
 

Latest posts

M
Replies
0
Views
1
MusicLovingIndianGirl
M
Q
Replies
0
Views
1
quora question
Q
Top