How to Build a Countdown Timer in React with SOLID Principles

Building a countdown timer is a classic exercise in React. To make it even more interesting, we’ll use a SOLID approach to create reusable and testable components. This tutorial will guide you through implementing a 10-second countdown timer that stops at zero and changes the color of an element.

Applying SOLID Principles to Design

For a scalable and maintainable design, we’ll focus on the Single Responsibility Principle (SRP) and other SOLID principles as we build this timer.

• Single Responsibility Principle (SRP): Each component should do one thing only. We'll have separate components for the timer logic, the UI, and the color-change behavior.
• Open/Closed Principle (OCP): Our components should be extendable without modifying existing code, so we’ll use props and state effectively.
• Dependency Inversion Principle (DIP): Abstracting time logic into hooks keeps components flexible and reusable.

Creating the Timer Logic with a Custom Hook

Let’s start with a custom hook, useCountdown, to handle the countdown logic. This isolates the timer’s logic, making it reusable.

Building the Countdown Component

Now, let’s create a CountdownDisplay component to show the countdown. This component follows SRP, focusing only on displaying the time.

Creating the Main Component

Next, we’ll create the main CountdownTimer component. This component will handle the color change when the countdown reaches zero.

Using Dependency Injection for Flexibility

Let’s improve flexibility by adding props that allow us to modify the countdown duration and color after the timer finishes. This follows the Dependency Inversion Principle, making the component more extensible.

Final App Component

Now, import and use the CountdownTimer component in your main App component.

Conclusion

In this tutorial, we built a countdown timer with React, keeping each component focused on a single responsibility. The use of a custom hook (useCountdown) allowed us to encapsulate the timer logic, making it reusable and easy to test. By applying SOLID principles, our countdown timer is now modular, extendable, and adaptable for future modifications.

Feel free to experiment by adding more features, such as pausing or resetting the timer. Applying SOLID principles helps keep the code clean and flexible for various scenarios. Happy coding!