search

ndresx / react-countdown

A customizable countdown component for React.
MIT License
745 stars 68 forks source link

Countdown restarts on every re-render #258

Closed peterzanetti closed 1 week ago

peterzanetti commented 2 months ago

In my React component, the countdown is conditionally rendered on a boolean prop. This prop gets set to true and is never reset to false. Any re-render in the same component (e.g. user input in a form field) causes the countdown to restart. How do you avoid this?

YaiGitH commented 1 month ago

Hi @peterzanetti, did you find a solution for this issue? I'm facing the same in my project.

peterzanetti commented 1 month ago

Nope. I am still using it, only because no one has noticed yet that the countdown resets, lol. It is more of a decorative feature so I haven't worried about it to much, but eventually I will need to address it, and probably remove this library since I get no answer after 2 weeks.

YaiGitH commented 1 month ago

Thanks, @peterzanetti for you're response. I found some StackOverflow links that helped me solve my problem, check them out and maybe they can help you too. I ended up using a react ref because I wanted my countdown component to be as decoupled as possible. [https://stackoverflow.com/questions/56514128/reactjs-countdown-reset-unexpectedly?rq=3] [https://stackoverflow.com/questions/65218551/unexpected-react-countdown-component-re-render-when-input-changes?rq=3]

peterzanetti commented 1 month ago

Thanks for the tip, moving the Date function into a state variable was enough to resolve it for me. Should have occurred to me that it was because the function was executing on each re-render. Thanks again.

ndresx commented 1 month ago

I see you already figured it out, thanks for looking into it. For this and other potential problems, please check out the FAQ section: https://github.com/ndresx/react-countdown?tab=readme-ov-file#why-does-my-countdown-reset-on-every-re-render

peterzanetti commented 1 month ago

Thanks. Perhaps making date a state variable should be part of your minimum default example, since I can't envision a scenario where resetting the countdown on every re-render would be an ideal default behavior.

ndresx commented 1 week ago

It depends on the date value. Maybe it already comes from some state, maybe not. However, I know that the current way of handling this could be better, so I'll try to improve this in an upcoming version!

I'll close this issue. If you have any other questions, please feel free to re-open or create a new one!