Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to Create a Countdown Timer Using ReactJS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Numerous applications and websites provide helpful countdown clocks. They offer a visual representation of the amount of time left in relation to a certain activity or event. In this article, we’ll look at how to make a countdown timer with ReactJS, a well-liked JavaScript user interface toolkit. Basically, a countdown timer will indicate when an offer or event will stop or start. 

Approach: We can use the following approach in React JS to use the Countdown timer.

  • getTimeRemaining: This will compute the difference between the target timer and the current time we have. This function will check the time left from the target timer by doing calculations and return a total number of hours, minutes, and seconds.
  • StartTimer: This function will start timing down from getting a total number of hours, minutes, and seconds from the getTimeRemaining function.
  • ClearTimer: This function is used to reset the timer, which means If you restart the timer it clears the time remaining from the previous countdown, otherwise it starts parallel two-timing down or it may collapse each other.
  • getDeadTimer: This function provides the deadline of the timer means it gives time from where you want to start the countdown. In this, you have to add time if you want to extend. We have used this in two scenarios first when the page is loaded and second when someone clicks the reset button.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

Example: Now let’s see how to create a countdown timer in Reactjs. The code for App.js will look like the following.



import React, { useState, useRef, useEffect } from 'react'
const App = () => {
    // We need ref in this, because we are dealing
    // with JS setInterval to keep track of it and
    // stop it when needed
    const Ref = useRef(null);
    // The state for our timer
    const [timer, setTimer] = useState('00:00:00');
    const getTimeRemaining = (e) => {
        const total = Date.parse(e) - Date.parse(new Date());
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / 1000 / 60 / 60) % 24);
        return {
            total, hours, minutes, seconds
    const startTimer = (e) => {
        let { total, hours, minutes, seconds }
                    = getTimeRemaining(e);
        if (total >= 0) {
            // update the timer
            // check if less than 10 then we need to
            // add '0' at the beginning of the variable
                (hours > 9 ? hours : '0' + hours) + ':' +
                (minutes > 9 ? minutes : '0' + minutes) + ':'
                + (seconds > 9 ? seconds : '0' + seconds)
    const clearTimer = (e) => {
        // If you adjust it you should also need to
        // adjust the Endtime formula we are about
        // to code next   
        // If you try to remove this line the
        // updating of timer Variable will be
        // after 1000ms or 1sec
        if (Ref.current) clearInterval(Ref.current);
        const id = setInterval(() => {
        }, 1000)
        Ref.current = id;
    const getDeadTime = () => {
        let deadline = new Date();
        // This is where you need to adjust if
        // you entend to add more time
        deadline.setSeconds(deadline.getSeconds() + 10);
        return deadline;
    // We can use useEffect so that when the component
    // mount the timer will start as soon as possible
    // We put empty array to act as componentDid
    // mount only
    useEffect(() => {
    }, []);
    // Another way to call the clearTimer() to start
    // the countdown is via action event from the
    // button first we create function to be called
    // by the button
    const onClickReset = () => {
    return (
        <div className="App">
            <button onClick={onClickReset}>Reset</button>
export default App;

Steps To Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

My Personal Notes arrow_drop_up
Last Updated : 25 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials