Canceling setInterval in React
Photo by Icons8 team on Unsplash
Sometimes you need to run a command in an interval using window.setInterval.
But if you don't stop the interval when the component using the setInterval is not stopped,
it will continuously run using unnecessary resources.
I will talk about how to handle setInterval in React
😅 Reproducing the Issue
Let's create a very "contrived" example that prints "hello world" every second in console.
| class Greeting extends Component { | |
| hello = id => console.log(`hello world! - ${id}`); | |
| componentDidMount() { | |
| const id = shortid.generate(); | |
| setInterval(e => this.hello(id), 1000); | |
| } | |
| componentWillUnmount() { | |
| console.log("Greeting unmounted..."); | |
| } | |
| render() { | |
| return ( | |
| <div> | |
| <Link to="/main">Go to Main Page</Link> | |
| </div> | |
| ); | |
| } | |
| } |
[
Follow along on CodeSandBox
](https://codesandbox.io/s/0x979w8n5l?expanddevtools=1&initialpath=%2Fmain&moduleview=1&view=preview)
When you navigate away from the component (to simulate unmounting), the interval still runs.
Even worse, when you navigate back to Greeting component, another interval process starts! 😱
Error Reproduced
🔧 How to Fix the Issue
You need to save the interval ID when you call the setInterval.
Reference: WindowOrWorkerGlobalScope.setInterval()
| class Greeting extends Component { | |
| intervalID = 0; | |
| componentDidMount() { | |
| this.intervalID = setInterval(this.hello, 1000); | |
| } | |
| ... | |
| } |
To cancel setInterval, you need to call `clearInterval`, which require the interval ID returned when you called setInterval.
The best place to do is right before the component unmounts (componentWillUnmount).
| componentWillUnmount() { | |
| clearInterval(this.intervalID); | |
| } |
You can see below that the interval doesn't run any more after canceled within componentWillUmount.
The interval canceled
[
Try it for yourself
](https://codesandbox.io/s/w7mnz4w0pk?autoresize=1&expanddevtools=1&moduleview=1&view=preview)