ndresx / react-countdown

A customizable countdown component for React.
MIT License
755 stars 70 forks source link

Maximum depth reached error #218

Closed blockchain5992 closed 1 year ago

blockchain5992 commented 2 years ago

I am getting maximum depth reached error while adding as a timer in my application

ndresx commented 2 years ago

Hi, could you please provide an example of how you are using it?

blockchain5992 commented 1 year ago

I am fetching date param from backend and want to show countdown timer for my contest. So I am adding Countdown component in return like this: <Countdown date={ abc?.xyz } renderer={renderer} /> const renderer = ({ days, hours, minutes }) => { // Render a countdown return (

{" "} {days} d : {hours} h : {minutes} m
);

};

So when I am opening my page it will not loaded and I got maximum depth limit reached error.

ndresx commented 1 year ago

This alone shouldn't lead to an issue like that, given that the examples work. Do you have an example of what the date can be?

ndresx commented 1 year ago

Hi, is this still happening for you?

MuhammadHadiofficial commented 1 year ago

i'm also facing this issue when trying to update state in renderer function!

ndresx commented 1 year ago

Hi, you should avoid updating the state in any render function in React since state updates result in a rerender (and then the cycle starts again, and again => infinite loop) unless you manually prevent it in one of the other lifecycle methods.

MuhammadHadiofficial commented 1 year ago

I think oncomplete callback will handle the state updates right?

ndresx commented 1 year ago

It depends on what you would like to achieve, but yes, you could update the state in one of the callbacks, e.g., onComplete.

MuhammadHadiofficial commented 1 year ago

Thank you! I fixed my issue.

ndresx commented 1 year ago

I'm closing this. Please feel free to re-open or create a new issue if you still encounter this problem!