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 strict strict-typescript strict-type-checked

Rule Details

Scheduling an 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 renders' effects after each subsequent re-render.

Examples

Setting interval without cleanup in useEffect

import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Problem: A 'setInterval' created in 'useEffect' must be cleared in the cleanup function.
    const intervalId = setInterval(() => console.log(count), 1000);
  }, []);

  return null;
}

Clearing interval in useEffect cleanup

import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Recommended: Store the interval ID
    const intervalId = setInterval(() => console.log(count), 1000);
    // Recommended: Clear the interval in the cleanup function
    return () => clearInterval(intervalId);
  }, []);

  return null;
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: Synchronizing with effects
• MDN: setInterval
• MDN: clearInterval

See Also

• react-web-api/no-leaked-event-listener
  Enforces that every addEventListener in a component or custom hook has a corresponding removeEventListener.
• react-web-api/no-leaked-fetch
  Enforces that every fetch in a component or custom hook has a corresponding AbortController abort in the cleanup function.
• react-web-api/no-leaked-resize-observer
  Enforces that every ResizeObserver created in a component or custom hook has a corresponding ResizeObserver.disconnect().
• react-web-api/no-leaked-timeout
  Enforces that every setTimeout in a component or custom hook has a corresponding clearTimeout.