Reset the Interval

[dzuz14]

Reset the Interval

[DZuz14]

Yeah, you are totally right. I never thought of that. This is actually an interesting problem to solve, as the code definitely needs a refactoring to support this. Any ideas?

[NicolaG1993]

This is how I've solved this issue in my App:

(Slider.js)

• delete play, interval, the if statement that activate setInterval, and the clearInterval as well
• write them inside a new useEffect
• inside the array pass activeSlide

All of this code now gets activated only when a new slide renders on screen, and this will also clear the interval when the component unmount

I haven't tested it so much yet and i'm new to React too, so im not 100% sure this is the best solution, but it seems to work!

Btw thanks a lot @DZuz14! I've founded this slider very usefull for my project, so I really hope i can give something back with this solution

here is the code:
useEffect(() => { const play = () => { autoPlayRef.current(); }; let interval = null; if (props.autoPlay) { interval = setInterval(play, props.autoPlay * 1000); } return () => { if (props.autoPlay) { clearInterval(interval); } }; }, [activeSlide]);