React-Router code gone bad after change router

JavaScript
1

hi, i’ve this line App.js

  <Switch>
          <Route exact path="/"  component={Home}/>
          <Route path="/movies" component={MoviesPage}/>
          <Route path="/tv" component={tvSeriesPage}/>
      </Switch>

and on Home i put the Slideshow that have this function


    componentDidMount() {
        this.slide();
    }

 slide = () => {
        $(".slideshow > .card:gt(0)").hide();
        setInterval(() => {
            $(".slideshow > .card:first")
                .fadeOut(3000)
                .next()
                .fadeIn(3000)
                .end()
                .appendTo('.slideshow')
        }, 6000)
    }

when i open the webisite at the Home, everthing work very well, no problem, after i go on other Router and then come back at Home, where the website reload the API and the other stuff the code gone bad, don’t wait the time for make the fadeIn and FadeOut, come very fast, every second become more fast and make the animation always more faster then before, why?

2

Because after you leave Home component, setInterval is still running, and when you return to Home another setInterval is created and so on.

You need to change this:

this.interval = setInterval(() => { // save interval id

and add this:

componentWillUnmount() {
  clearInterval(this.interval);
}

Also it’s generally not a good idea to mix React and jQuery.

3

thanks for advice, i’m already think on the future to change the Jquery function and replace with some package or create a slideshow with vanilla JS, it’s a project big i want to create for portfolio and i don’t want to use so many package from npm, i’m already used one for gallery on Home page and the other page i’ll use too the same package, for the slideshow on home i prefer to use some differente from npm pakcage to show i can do it without search on web some package