no-leaked-interval
Full Name in eslint-plugin-react-web-api
react-web-api/no-leaked-intervalFull Name in @eslint-react/eslint-plugin
@eslint-react/web-api/no-leaked-intervalFeatures
🔍
Presets
web-apirecommendedrecommended-typescriptrecommended-type-checked
What it does
Enforces that every setInterval in a component or custom Hook has a corresponding clearInterval.
Scheduling a interval within the setup function of useEffect without canceling it in the cleanup function can lead to unwanted setInterval callback executions and may also result in using stale values captured by previous render’s effects after each subsequent re-render.
Examples
Failing
import React, { useEffect, useState } from "react";
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => console.log(count), 1000);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// - A 'setInterval' created in 'useEffect' must be cleared in the cleanup function.
}, []);
return null;
}Passing
import React, { useEffect, useState } from "react";
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => console.log(count), 1000);
return () => clearInterval(intervalId);
}, []);
return null;
}