Stopwatch timer in React without Start and Reset buttons
In this tutorial, we will try and build a Stopwatch timer in React.
When I needed to build one for my project I remember, it took a lot of time to find valuable information about it, but even then I had to customize it, as always in programming, to apply to my project.
Without further ado let’s dive in.
I suppose you already started your React project. If you didn’t I recommend using Vite instead of Create React App because Vite has all the necessary folders simple and short. I remember deleting a bunch of folders when I used Create React App, and now we would not want to waste your precious time, do we? 😌
Now, that we already have started a project, go ahead and make a new component called StopWatch.jsx ( we use jsx because we will include some html as well in the component at the end)
- quick note: it is a good practice to make all the components inside the components folder
import React, { useState, useEffect } from "react";const StopWatch = () => {};export default StopWatch;
For our program, we will use two features from React and some basic math to convert numbers into time.
If you take close attention to the code above, we imported React Hooks useState() and useEffect() for further use. One allows us to store data and monitor if the stopwatch is running and the second will check the timer process and will update the time.
For that, in our StopWatch function, we need to add states.
const StopWatch = () => {
const [time, setTime] = useState(0);
const [process, setProcess] = useState(false);
};export default StopWatch;
For stopwatch time management and calculations, we will need the second Hook, useEffect(), and an additional build-in feature setInterval() method.
const [time, setTime] = useState(0);
const [process, setProcess] = useState(false); useEffect(() => {
let interval;
if (process) {
interval = setInterval(() => {
setTime((prevTime) => prevTime + 10);
}, 10); } else if (!process) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [process]);};
As for the math part, we will include it in the same component like it is shown in the code below:
return (
<div>
<span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
<span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span>
</div>
);
The time is calculated by dividing the time by the number of milliseconds for each unit of time. Then we use the remainder operator % to calculate if the time is divisible by 60 for seconds, 60 for minutes, and 100 for milliseconds. For example, 1 minute 20 seconds is 80000 milliseconds so to calculate the seconds we do (80000 / 1000) % 60 = 20. Without the remainder operator, (80000 / 1000) = 80 we just get the total seconds.
And here comes the magic part 😋 to make the program start from the begging without any stars or stop buttons and additional code we will change the useStates default value to the “true” and when the window will load the timer will automatically start running.
const [process, setProcess] = useState(false);And here is our result:
That is all for this project and if we want to display it in the main App.jsx we only need to import our stopwatch component in it as it is given in the code below.
import StopWatch from "./Stopwatch";const App = () => {
return (
<div className="App">
<p>Time</p>
<Stopwatch />
</div>
);
};export default App;
This is it. Our program is finished and ready to be used. 🏆
reference:
