logoESLint React
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

Features

🔍

Presets

  • web-api
  • recommended
  • recommended-typescript
  • recommended-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;
}

Implementation

Further Reading

Previous

no-leaked-event-listener

Next

no-leaked-resize-observer

On this page