Rules
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-intervalPresets
web-apirecommendedrecommended-typescriptrecommended-type-checked
Description
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;
}Implementation
Further Reading
See Also
- no-leaked-timeout
Enforces that everysetTimeoutin a component or custom Hook has a correspondingclearTimeout.