Rules
no-leaked-interval
Full Name in eslint-plugin-react-web-api
react-web-api/no-leaked-interval
Full Name in @eslint-react/eslint-plugin
@eslint-react/web-api/no-leaked-interval
Presets
web-api
recommended
recommended-typescript
recommended-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 everysetTimeout
in a component or custom Hook has a correspondingclearTimeout
.