React Machine Coding Series – Part 3: Countdown Timer with Normalized Time

Edition Overview

In this edition of my React Machine Coding Series, I’m building a countdown timer from scratch using React.

The focus is on correct state modeling, time normalization, and clean side-effect handling. Timers look simple, but they reveal many subtle issues when not designed carefully.

Problem Description

Create a countdown timer with:

• Hour, minute, and second inputs
• Start, Pause or Continue, and Reset controls
• Accurate countdown behavior
• Proper normalization of time inputs

Functional Behavior

Button state transitions

• When the timer is 00:00:00 Buttons display Start and Reset
• After entering any valid time The timer can be started
• While the timer is running The button switches to Pause
• When paused The button switches to Continue
• Reset clears all values and stops the timer

Countdown logic

• Timer decreases every second
• Timer stops automatically at zero
• No negative values are allowed

Time normalization

User input is normalized before the timer starts.

Examples:

• Entering 63 minutes becomes 01:03:00
• Overflow in seconds or minutes is converted correctly
• Countdown always runs on normalized values

This keeps the logic predictable and reliable.

Design Approach

Single source of truth

The timer is driven by a single value called totalSeconds.

Hours, minutes, and seconds are derived from it.

This avoids state mismatches and keeps the countdown logic simple.

Normalization before execution

All input values are converted into total seconds before starting the timer.

This ensures:

• Correct overflow handling
• Clean arithmetic during countdown
• Consistent UI updates

Side-effect management with useEffect

Two effects are used:

• One handles the ticking interval
• One derives display values from total seconds

Cleanup is handled correctly to prevent multiple intervals or memory leaks.

Demo gif :

Tech Stack

• React.js
• Tailwind CSS

No external libraries were used.

Key Takeaways

• Model time as a single numeric value
• Derive display state instead of duplicating logic
• Normalize user input early
• Keep side effects isolated and predictable
• Build UI behavior from state, not scattered conditions

Github Code link : Github link

What’s Next

In the next edition, I’ll continue building on this series with more React components that focus on clarity, correctness, and maintainability.

Closing Note

This series is part of my ongoing effort to learn in public and write clean, understandable React code.

If you found this useful, feel free to like, share, or add your thoughts in the comments.