DEV Community

How To Create A Timer With React

Julia 👩🏻‍💻 GDE on July 27, 2022

For one of my current projects, I created a timer until the release on New Year's Eve - December 31, 2022. Since the project is written in React, I...

Read full post

Raí B. Toffoletto • Jul 29 '22

Nice beginner article @yuridevat and great comment @lukeshiru . I also would rather store the unix timespan than the values individually, it makes easier to do math with it and you wouldn't need even to setTime a new timespan every second, a simple subtraction would do the trick. =D

Building on that, here's a handy hook:

import { useState, useEffect } from "react";

const SECOND = 1_000;
const MINUTE = SECOND * 60;
const HOUR = MINUTE * 60;
const DAY = HOUR * 24;

export default function useTimer(deadline, interval = SECOND) {
  const [timespan, setTimespan] = useState(new Date(deadline) - Date.now());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTimespan((_timespan) => _timespan - interval);
    }, interval);

    return () => {
      clearInterval(intervalId);
    };
  }, [interval]);

  /* If the initial deadline value changes */
  useEffect(() => {
    setTimespan(new Date(deadline) - Date.now());
  }, [deadline]);

  return {
    days: Math.floor(timespan / DAY),
    hours: Math.floor((timespan / HOUR) % 24),
    minutes: Math.floor((timespan / MINUTE) % 60),
    seconds: Math.floor((timespan / SECOND) % 60)
  };
}

Then its simple to use:

const { days, hours, minutes, seconds } = useTimer("2022-12-31T23:59:59");

Raí B. Toffoletto • Jul 29 '22

Yes good point! But as far I remember it deviates very irregularly in the milliseconds, so I tend to ignore it unless it's crucial 😅. But thanks for the video link, I'll watch it to refresh my memory on the subject 😁.

In that case only one useEffect is needed:

useEffect(() => {
    const intervalId = setInterval(() => {
      setTimespan(new Date(deadline) - Date.now());
    }, interval);

    return () => {
      clearInterval(intervalId);
    };
  }, [deadline, interval]);

Julia 👩🏻‍💻 GDE • Jul 28 '22

Wow! Thank you for your suggestion! Since my tutorial is a beginner tutorial, I won't change it, but will include your comment in the article, because it could be very important for those who want to write the code in a professional way and this comment must not be overlooked in any case!

I myself will study your solution to fully understand it. It's time for me to finally write code in a professional way! You really made my day, thanks again!

Julia 👩🏻‍💻 GDE • Jul 28 '22

Thank you so much for your suggestions, I will insert most of your suggestions (the ones I get 😅) right away!

Doh', I thought that I did not fully understand setInterval/clearInterval and useEffect. I will read about it again and update the information.

Thank you for helping me making this tutorial better, I really appreciate it.

francoisaudic • Jul 27 '22

For the HTML, you could put a « timer » role and an attribute tabindex="0" on the container of the timer.

Julia 👩🏻‍💻 GDE • Jul 28 '22

Shame on me. Thank you very much for this advice, Francois. I should indeed include accessible code in my (future) tutorials from the beginning, and not only for my accessibility articles themselves. I will do my research and implement it. I will keep you posted when I have revised the code.

Thank you for supporting me in getting better at accessibility every day.