Problem with React context API and useEffect hook

Question

Hey everybody.
So I have a timer component and 4 option components.

I want behavior that if timer is out of time then it should move to next question and same thing + timer set to 0 should happen if any option is clicked.

It works fine with timer, like if it runs out of time then next question is displayed but once I use option button then it behaves different and timer also runs twice speed.

Here is my code, please can anyone check out where did I make mistakes?
https://code.sololearn.com/W6g76LukrNky/?ref=app

Answer 1

As suggested by calvin:
Different useEffect for timer and currentIndex.

I used setInterval instead of setTimeout

https://code.sololearn.com/WsU4oM3cEBi6/?ref=app

Answer 2

Putting the interval/timeout value in the hook state just ensures that we have the updated value.

you can test this code to see what happens when declaring the value without useState:

https://code.sololearn.com/WY3PM3Qj82Z1/?ref=app

If you don't need to control the clear functions from within the component you can use a unmount useEffect and initialize the interval in there (and return a function that clears it)

Answer 3

🔫 Rick Grimes better use separate useEffect for timer and currentIndex.

Answer 4

🔫 Rick Grimes timeouts and intervals can be tricky with hooks (and in react lifecycles in general)

Answer 5

Calviղ the variable name is timerInterval, but the functions are setTimeout and clearTimeout 😂

Answer 6

Don't be afraid of having multiple useEffect hooks

Just try to keep them as tidy as possible

Answer 7

How about hositing the timer to a global level. Explicitly, adding the timer variable to the reducer state, and reseting to 0 inside the dispatch SET_QUESTION type?

Answer 8

🔫 Rick Grimes since it's setTimeout, you can safely clearTimeout whenever useEffect runs, no need to check for timerTimeout!=null

Answer 9

Calviղ
Okay let me try that way and see if I can solve it otherwise I'll have to go by way suggested by Gordon

I actually thought about that way but then I thought it might be not the best way to do it, so dropped that idea 😬

Answer 10

If you put setInterval in useEffect with timer trigger, the timer speed would be double whenever timer is triggered.
You can use setTimeout instead, let timer retriggers the interval.

Answer 11

Calviղ sorry, my bad. I was trying to do this with interval but after some Google search I found this way and I forgot to change variable name

Gordon Do i have to use multiple useEffects?

Answer 12

🔫 Rick Grimes i notice currentIndex is increment when option is selected, and it triggers useEffect function running.

Should currentIndex triggered, run clearTimeout while the timeout is still counting? instead of setting setTimeout again.

Answer 13

🔫 Rick Grimes I noticed that timerTimeout is always null, so currentIndex has no way to clearTimeout.

Answer 14

I tried to edit code as Gordon suggested, the only problem now is that once I use option to change question index then timer is running at twice speed.
https://code.sololearn.com/WwiPUR4UaKN8/?ref=app

Answer 15

🔫 Rick Grimes did you clearTimeout when currentIndex triggered?

Answer 16

🔫 Rick Grimes I think timerTimeout should be in global state too..

Answer 17

Burey okay that's pretty neat example.
I never thought of making it that way. Thank you so much for that.

Answer 18

Calviղ issue is solved but still I tried to do clearTimeout for currentIndex useEffect which causes timer to never start (just updated code)

Calvin and Gordon thanks to you two for taking some time for me. :)

Answer 19

Yes, indeed it is.
I almost wasted 2 hours looking for solution

Answer 20

Adding some console log
https://code.sololearn.com/WoOkrRqgTyrg/?ref=app