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?
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:
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)
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 😬
🔫 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.
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. :)