best practice with setTimeout and setInterval
npm install eslint-plugin-clean-timerEnforce best practice with setTimeout and setInterval
It is always easy to forget to clear the timers set up by setTimeout or setInterval, which can cause bugs that are uneasy to find out.
Image a component with onMount and onUnmount life cycles, in the code below, if the component is mounted and unmounted within 1000ms, the timer will still fire
``jslet timer = setInterval()
class App {
onMount() {
/* timer id should assign to an identifier or member for cleaning up,
*/`
setInterval(() => {}, 1000);
/ ^^^^^^^^^^^^^^^^^^^^^^^^ /
}
}
The best practice is to clear the timer whenever we don't need it any more.
This ESLint plugin can warn you when you are setting up any timers need to be cleared.
`js`
class App {
onMount() {
this.timer = setInterval(() => {}, 1000);
}
onUnmount() {
clearInterval(this.timer);
}
}
`bash`
npm install eslint-plugin-clean-timer --save-dev
Add clean-timer to your eslint configuration file
`json`
{
"plugins": ["clean-timer"],
"rules": {
"clean-timer/assign-timer-id": 2
}
}
timer need to be cleared
`js`
setTimeout(() => {}, 1000);
setInterval(() => {}, 1000);
setInterval(() => {}, 0);
setInterval(() => {});
timer not need to be cleared
`js``
setTimeout(() => {}, 0);
setTimeout(() => {});
MIT License