Core React Concepts for Building a Countdown Timer

Here we cover the key React concepts used in the Counter App: components, state/hooks, and event handling.

Components

In React, a component is an independent, reusable piece of the UI. Think of components as JavaScript functions (or classes) that return a portion of the webpage (in JSX). For example, our app will have an App component (and possibly other sub-components) that encapsulates the countdown logic and UI.

Components help organize the code: you can build a small component for the timer display and another for the input form, then combine them. React components manage their own state and props, and React efficiently updates each component when data changes.

Functions

A function in JavaScript is a block of code designed to perform a particular task. We will use functions for event handlers and logic. For example, we’ll write a handleStart() function to calculate the total seconds when the user clicks “Start”. We’ll also use helper functions to convert seconds into days, hours, minutes, and seconds.

Arrow functions (e.g. () => { ... }) are commonly used in React components for concise function expressions. Functions let us reuse logic easily, and by giving them descriptive names, our code becomes easier to understand and maintain.

React Hooks – useState

In React function components, the useState Hook lets you add local state. State holds data that can change over time and causes the UI to re-render when updated. In our app, we will use useState to store the input values (days, hours, minutes, seconds) and the remaining time.

For example: const [days, setDays] = useState(0); creates a state variable days (initially 0) and a setter setDays. When we call setDays(5), React updates days to 5 and re-renders the component.

React Hooks – useEffect

The useEffect Hook is used for side effects in function components. A side effect is something that happens after render, such as fetching data or setting up a timer. By default, useEffect runs after every render. We will use useEffect to create and clean up our countdown timer interval.

For example, when the countdown starts, we set up a setInterval inside useEffect to decrement the timer every second. If we include a dependency array (e.g. [running] or [timeLeft]), we can control when the effect runs. In our code, we’ll watch the running state to start/stop the timer, and we’ll clear the interval in the cleanup function to avoid memory leaks.