Building Dynamic Countdown Timers with React & MomentJS

Make countdowns that actually work, not just look cool.

I’ll be honest:

I once hardcoded a countdown timer that stopped working on Day 2. And no, I didn’t know why.

Turns out, building a countdown that updates in real time and doesn’t freak out when you refresh the page…

needs a bit more than setInterval.

That’s when MomentJS + React became my go-to combo.

So if you’re planning to build a launch timer, flash sale clock, or “X days left” feature, this article’s for you.

Let’s build something simple, dynamic, and actually useful.

What We’re Building

A live countdown timer that:

Counts down to a future date
Updates every second
Stops at zero
Looks clean & works in React
Doesn’t go mad on page refresh, modal close or any other user interaction.

📦 What You’ll Need

Install moment:

npm install moment

Then use useEffect and setInterval in React to make it dynamic.

Code Breakdown

CountdownTimer Component

import React, { useState, useEffect } from 'react';
import moment from 'moment';

// CountdownTimer Component
const CountdownTimer = ({ targetDate }) => {
 const calculateTimeLeft = () => {
 const now = moment();
 const target = moment(targetDate);
 const duration = moment.duration(target.diff(now));

 const totalSeconds = Math.floor(duration.asSeconds());

 if (totalSeconds <= 0) {
 return {
 days: 0,
 hours: 0,
 minutes: 0,
 seconds: 0,
 };
 }

 const days = Math.floor(duration.asDays());
 const hours = Math.floor(duration.hours());
 const minutes = Math.floor(duration.minutes());
 const seconds = Math.floor(duration.seconds());

 return { days, hours, minutes, seconds };
 };

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

 useEffect(() => {
 const timer = setInterval(() => {
 const newTimeLeft = calculateTimeLeft();
 setTimeLeft(newTimeLeft);

 if (
 newTimeLeft.days === 0 &&
 newTimeLeft.hours === 0 &&
 newTimeLeft.minutes === 0 &&
 newTimeLeft.seconds === 0
 ) {
 clearInterval(timer);
 }
 }, 1000);

 return () => clearInterval(timer);
 }, [targetDate]);

 return (
 <div>
 <h3>Countdown:</h3>
 <p>
 {timeLeft.days}d {timeLeft.hours}h {timeLeft.minutes}m{' '}
 {timeLeft.seconds}s
 </p>
 </div>
 );
};
export default CountdownTimer;

App Component

import CountdownTimer from './components/countdowntimer';

const App = () => {
 return <CountdownTimer targetDate={'Thu Apr 25 2025 14:37:03 GMT+0530'} />;
};

export default App;

What’s Happening Here?

calculateTimeLeft() → uses moment to calculate time remaining
setInterval() → updates the countdown every second
clearInterval() → stops it at zero (so your CPU doesn’t cry)
All logic inside useEffect for real-time magic in React

Where Can You Use This?

Upcoming product launches
Flash sales timers
Online test/exam countdowns
Personal projects that just need some urgency
Special offers

Final Thought

A simple countdown timer may not look like a big deal…
But when it runs smoothly and reliably, it gives your app that polished, pro touch.

And the best part? Now you can build one from scratch in minutes.

Note for Readers

What’s one real-world feature you’d love to build next in React?
Drop it below 👇 Maybe I’ll turn it into the next walkthrough article!

Support Me and My Writings

If my words have ever made you smile or think, you can fuel my next piece with a cup of coffee ☕️. Every sip is a quiet thank you. 💛

At Dev Simplified, We Value Your Feedback 📊

👉 If you like the article, then please support us by clapping for this article.

👉 Have any suggestions? Let us know in the comments!

👉 Subscribe for free and join our growing community!