Prevent timer restarting on page refresh

[DiegoMcDipster]

Hi,

Would you be able to advise me on the best practice for keeping the timer counting down if the page is re-rendered?

The scenario,

1. the timer is counting down.
2. the user accidently clicks the browser back button
3. the browser warns that data will be lost
4. the user cancels and so the application should continue.
5. however, the count down timer is restarted.

In this scenario what is the best practice to keep the timer running from where it was when the back button was clicked?

[vydimitrov]

Hey, you will need to keep the remaining time somewhere else but the local App state, like in a localStorage or some backend API. For that you can use the onUpdate callback, which will provide you with the remaining time. Once the App renders you can check if there is saved value and pass it to the initialRemainingTime prop, keeping the same duration as before.

[DiegoMcDipster]

@vydimitrov thanks for the feedback! In the end I found that it was a problem in my code... when the back browser button was clicked, the loading animation would appear. When I clicked cancel, the page would be re-rendered... and so the timer would re-start.

solution: I removed the loading animation and used nprogress instead.

[Abdurrahman-Alizada]

onUpdate function is not working for me. Please check the way I'm calling it. Is this the right way or not.

<CountdownCircleTimer
isPlaying
duration={7}
colors={[["#004777", 0.33], ["#F7B801", 0.33], ["#A30000"]]}
onComplete={() => console.log("complete")}
updateInterval={0}
initialRemainingTime={5}
onUpdate={() => console.log("update")}
>
{renderTime}