Remove Set interval on component unmount

Question

This is my code for notification fetching

 static contextType = Context;
  constructor(props) {
    super(props);
    this.state = {
      roleName: null,
      notCount : null,
      notificationData:[],
      gotoNotify:false,
    }
  }

  logOut = () => {
    Cookies.remove('_token');
    Cookies.remove('_ACid');
    Cookies.remove('_ACrole');
    Cookies.remove('_ACname');
  }
  componentDidMount() {
    this.getNotification();
     setInterval(() => {
    this.getNotification();
  }, 10000);
  }
 
  componentWillUnmount(){
    clearInterval();
    console.log("yes")
  }

I want to clearinterval when this component will unmount or when logout please help me to do this

Assign the interval identifier to state and pass it in when you call `clearInterval`? — DBS, Feb 01 '21 at 11:01
Just store the interval id.. `this.intervalId = setInterval(`, and then you can clear it -> `clearInterval(this.invervalId)` — Keith, Feb 01 '21 at 11:02
@DBS I wouldn't use state, or your going to get a pointless re-render. — Keith, Feb 01 '21 at 11:04

score 2 · Answer 1 · answered Feb 01 '21 at 11:07

Keep track of the interval identifier and use it to clear it:


consructor(props) {
  super(props);
  this.state = {...}
  
  this.notificationInterval = null; // unnecessary but good to keep track of it
}

componentDidMount() {
  this.getNotification();
  this.notificationInterval = setInterval(this.getNotification, 10000);
}

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

As a small note, you can call setInterval(fn) directly without using the arrow function:

// The two calls are pretty much equal:

setInterval(() => this.getNotification(), 1000);
setInterval(this.getNotification, 10000);

The 'without arrow function' version is fine if the given function doesn't use `this`. If it does, however, it can cause problems, like [this](https://stackoverflow.com/q/20279484/8376184) — FZs, Feb 01 '21 at 12:05

score 0 · Answer 2 · answered Feb 01 '21 at 11:07

0

You can use a global variable to assign your interval id.

After, you can clear your interval with this id

static contextType = Context;
let intervalId;
constructor(props) {
  super(props);
  
  this.state = {
    roleName: null,
    notCount: null,
    notificationData: [],
    gotoNotify: false,
  }
}

logOut = () => {
  clearInterval(intervalId);
  Cookies.remove('_token');
  Cookies.remove('_ACid');
  Cookies.remove('_ACrole');
  Cookies.remove('_ACname');
}
componentDidMount() {
  this.getNotification();
  clearInterval(intervalId);
  intervalId = setInterval(() => {
    this.getNotification();
  }, 10000);
}

componentWillUnmount() {
  clearInterval(intervalId);
  console.log("yes")
}

answered Feb 01 '21 at 11:07

R3tep

12,512
10
48
75

2

It's not a great idea to use a global variable, think of the case where a component is called multiple times. All the variables would point to the same global instance. It's better for it to be part of the Class / Object by using `this.property`. – Yuan-Hao Chiang Feb 01 '21 at 11:11
Yes like that you don't create several interval to notify the user. That why I use global variable. – R3tep Feb 01 '21 at 11:11
Ah, I see what you mean. In that case makes sense indeed – Yuan-Hao Chiang Feb 01 '21 at 11:13

Remove Set interval on component unmount

2 Answers2