React Hooks 25 + 5 Timer

Hi and thanks for checking this post out.

I did the 25 + 5 clock front end libraries project a few years ago and didn’t feel that good about it. For one, I wasn’t that comfortable with React at the time, but also I was in a hurry to move on. Recently, I’ve seen some people trying to tackle this challenge using React Hooks and having a rough go of it. Recalling that I did the challenge using class components, I decided to take an afternoon and redo the challenge using Hooks.

I’m interested in any feedback regarding the use of Hooks here, and in general effectively managing state while optimizing use of hooks in the context of the component lifecycle.

I have to give credit to Dan Abramov at React for writing such a helpful blog post concerning the setInterval API and using it in a React component.

The live working app is hosted at Netlify:
Live Working Demo

The code is at GitHub:
Project Code Repository

The test suite has been included so you can run all the tests to verify that everything’s working. All tests should pass on your PC browser, but the audio tests will fail on iPhones since it seems iOS will block the audio from playing as a policy. I’m not sure about Androids, but I’m guessing the result will be the same.

Thanks in advance!

Credit: Above-mentioned blog post by Dan Abramov

Hello there,

Props for going out of your way to redo something you did not feel that good about (pun intended); it is an excellent way to improve, and a realistic use of code.

I will say, your code is the cleanest, and most readable I have seen for this project. It was a pleasure to go through and understand.

So, the only comments I can make are not much more than a personal preference:

  1. Initial state could be stored in a global object, instead of having it in two places (useState setup, and reset function).
  2. The useInterval function deals with reading and setting one component’s state. So, I would expect it to be defined within the component. I can understand why it would be global, and it is well written to be used in multiple components, but it is not being used in more than one.

I have one thought about this:

useEffect(() => {
  setRemainingTime(remainingTime) 
}, [isRunning, remainingTime])

Does this really depend on isRunning? I can imagine this setting the same state twice, every time isRunning changes.

Excellent work on this. I liked it.

1 Like

I see what you did there!

Good Point!

Yeah, it’s a custom hook given by Dan Abramov in the blog post I mentioned. Not knowing if I would use it again later or not, I just pulled it out of the component on the fly and didn’t think to throw it in a ‘hooks’ folder or something.

Right. I carelessly left that in the dependency array after having whittled down the internal logic in the effect hook. I originally had a clumsy convoluted setup for setRemainingTime with three dependencies, haha.

Thanks for taking the time. Much appreciated.

1 Like