Mobile: countdown does not repeat when using useState function update in onComplete

[vydimitrov]

This bug affects only React Native countdown timer. The Web/React version on the countdown timer works as expected.

It was found that when setting a new state (using useState hook for example) in the onComplete handler, the component was going into infinite loop. The component uses internally useEeffect to track changes of play state, which also has depenedency of onComplete. When the component re-renders while in finished state (waiting the onCompelte to return) the onCompletehandler was called again causing the infinite loop.

Resolution: to solve the bug, I am now tracking the finished state. While the component is in finished state, a.k.a waiting for the onComplete handler to return, if new updates come they will be ignored until the onComplete finishes. Here is the commit that fixes the issue 0ea726d

[JRyanSaunders]

Hi @vydimitrov I have been messaging you on twitter under the name Kappiey. I have been trying to implement this in my project for a couple of days now but I can't get it to work. I was wondering if you could take a look?

https://github.com/JRyanSaunders/Fitness-App

[vydimitrov]

Hey @JRyanSaunders, your app helped me a lot to find the root cause of the bug, thanks for sharing it. The issue was caused by a loop in the onComplete callback. Since we were setting state in the callback, the parent component was re-rendered thus a new instance of the onComplete callback was passed, which caused to run the callback in a loop.

To solve it, I am now checking if we are in finished state and it that is the case I don't call the callback again. Here is the commit that fixes the issue

Please upgrade the package to 2.3.9 and you should have it fixed now.

Thanks for your time 👍

[JRyanSaunders]

I'm glad I could help @vydimitrov - thanks for making such a useful component! I have reverted back to my original code and everything is working perfectly now!