如何使用componentWillUnmount在React.js中删除setInterval

Question

I have two Intervals that is running in main Home Page when I move to other pages I get memory leak error and I Know that I should use componentWillUnmount so that the Interval stops running in other pages but I don't know how to achieve this. can somebody please help.

 componentDidMount() {
    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }
  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
    //clear Interval here
  }

Answer 1

basically, what you need is to use the clearInterval function in your componentWillUnmount .

in order to use it, you need to save your interval ID, it is mostly done on the componentDidMount() or in the constructor()

 constructor() {
    super();
    // references to 
    this.sliderInterval = null;
    this.animateInterval = null;

 }

 componentDidMount() {

    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }

  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    //save the interval Id
    this.animateInterval = setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    //save the interval Id
    this.sliderInterval = setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
      // clearing the intervals
      if(this.sliderInterval) clearInterval(this.sliderInterval)
      if(this.animateInterval) clearInterval(this.animateInterval)
  }

Answer 2

You can use setState to save the interval id returned from setInterval like so:

 componentDidMount() {
    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }
  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    let animateInterval = setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
    this.setState({ animateInterval: animateInterval});
  };

  widthSlider = () => {
    let sliderInterval = setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
    this.setState({ sliderInterval : sliderInterval });
  };
  componentWillUnmount(){
    clearInterval(this.state.sliderInterval);
    clearInterval(this.state.animateInterval);
  }

Answer 3

You have to store the interval in some variable

example:

this.myinterval = setInterval(...) or this.setState({ myinterval : setInterval(...) })

to lately clear it in hook "componenWillMount":

clearInterval(this.myinterval) or clearInterval(this.state.myinterval)