no-leaked-timeout

Full Name in eslint-plugin-react-web-api

react-web-api/no-leaked-timeout

Full Name in @eslint-react/eslint-plugin

@eslint-react/web-api-no-leaked-timeout

Presets

web-api recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Scheduling a timeout within the setup function of useEffect without canceling it in the cleanup function can lead to unwanted setTimeout callback executions and may also result in stale values captured by previous renders' effects after each subsequent re-render.

Examples

Setting timeout without cleanup in useEffect

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

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

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

  return null;
}

Clearing timeout in useEffect cleanup

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

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

  useEffect(() => {
    // Recommended: Store the timeout ID
    const timeoutId = setTimeout(() => console.log(count), 1000);
    // Recommended: Clear the timeout in the cleanup function
    return () => clearTimeout(timeoutId);
  }, []);

  return null;
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

Further Reading

• React Docs: Synchronizing with effects
• MDN: setTimeout
• MDN: clearTimeout

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-interval
  Enforces that every setInterval in a component or custom hook has a corresponding clearInterval.
• react-web-api/no-leaked-resize-observer
  Enforces that every ResizeObserver created in a component or custom hook has a corresponding ResizeObserver.disconnect().