Making a stopwatch in React. The process, the challenges, and the takeaways

For most of you, making a stopwatch using React might be an elementary problem. It was yesterday when I tried making one for the first time. In this blog, I will share with you all the challenges I faced as a beginner and how I overcame them while making the stopwatch.

The process

The first thing I did was think about all the features I wanted my stopwatch to have and jot them down. They were as follows:-

1. Create a display to show the time passed

2. Give buttons (and keyboard controls) to start/stop the watch

3. Give a lap button and display the lap time below the watch

The next step was to create a workflow to have a clear vision of how to proceed ahead. For that, I went through several blogs and articles on how to create a stopwatch using React. That gave me an idea of how to go ahead with my project. So, I wrote down the steps to it, which were:

1. Create a component Stopwatch that displays time in hh: mm: ss: ms format with the control buttons

2. Create a state timer that increases by 1 every 10 milliseconds using useState hook

3. Create a state that checks if the stopwatch is active or not

4. create a useRef hook interval that stores the id of the interval started by setInterval()

5. Create a useEffect that triggers every time the active state changes

6. Define functions to start/pause, restart the stopwatch

7. Attach them to start/pause and restart buttons using event handlers

8. Create a lap button to display the laps passed

- Create a state for storing lap values in an array

- Create a function to capture lap value and store it in the lap array

- Attach the function with the onClick event of the lap button

- Display the array using the .map() function

- Re-initialize the array on restart

• Calculate the time passed as follows:

  const milliseconds = (timer%100).toString().padStart(2,"0"); //padStart(target,"str") function is used to add padding(str) to the start of a string until it reaches the target length.

  const seconds = Math.floor((timer 100)%60).toString().padStart(2,"0")

  const minutes = Math.floor((timer / 6000)%60).toString().padStart(2,"0")

  const hours= Math.floor((timer/360000)%24).toString().padStart(2,"0")

• Display the time passed.

The challenges and the takeaways

• There were some new things that I learned along the way. One of them was the discovery ofsetInterval(callback,interval) function. I came to understand that this function executes the callback function after every interval and to stop it from executing I should use clearInterval(intervalID) function. I learned that setInterval() function is used for making stopwatches.

• I used this function inside the useEffect hook that would get triggered every time I changed the state of my timer. This led me to understand the working of useEffect hook in-depth and its life-cycle phases (mounting phases, unmounting phase, updating phase).

• One major challenge for me was to stop the timer by clicking the pause button and for that, I needed to have the interval ID of the interval that was currently executing. That led me to find out about useRef hook which once set, persists the same value and does not change over re-renders. That helped me to store the interval ID and pause it using the clearInterval(intervalID) function when needed.