React.js Pomodoro clock project with Hooks

JavaScript
1

Hi! I recently started learning Hooks in React and wanted to change my old React Project from FCC with Hooks. I’m changing my Pomodoro (25 + 5 ) Clock, however, it doesn’t work as I expected :joy:. If you have any advice for my code It would be really great to have ones. My clock working when I paused with start/pause button but when I clicked only once to start it, it goes under minus. … So it doesn’t change from session mode to break mode. I set setInterval with 100mms now to test it for now.

You can leave me any advice even some articles I can read about Hooks !

Here’s my github https://github.com/kby906/pomodoro
I wrote code in src/App.js.
Thank you in advance!!

2

It’d be nice if you could share your code on codepen or codesandbox, we could then not only read but also play around with your code to see what’s going on :wink:

1 Like
3

That’s so true!! @sitek94 Thank you for saying that :joy: !

this is my codesandbox url .
If you have time to look after it, it would be great to have some advice from you!
Thank you!

4

Notice that when you console.log the value of timeLeft in your changeTime function is not changing and because of that it keeps on decrementing.

const changeTime = () => { 
  console.log(timeLeft);
    
  if (timeLeft > 0) { ... }
}

I think the issue is with the way you handle intervals.

Interval is a side effect an all the side effects in functional components should be handled inside useEffect hook.

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase ). Doing so will lead to confusing bugs and inconsistencies in the UI.

Reactjs

1 Like
5

@sitek94 yes!! it works works works :smiley Thank you for the advice !!