jsx-eslint/eslint-plugin-react

Feature request: abortController + no-leaked-event-listener

Open

#3,967 opened on 2025年11月21日

GitHub で見る
 (3 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
bughelp wanted

説明

i've been using this pattern to clean up event listeners lately:

useEffect(() => {
  const abortController = new AbortController();
  const { signal } = abortController;

  window.addEventListener(
    "click",
    (event) => {
      doSomething();
    },
    { signal },
  );

  window.addEventListener(
    "resize",
    (event) => {
      doSomethingElse();
    },
    { signal },
  );

  return () => {
    abortController.abort();
  };
}, []);

it makes the cleanup function much smaller (and harder to mess up), plus it helps with type inference (i.e. you don't need to explicitly type your event handlers).

i can obviously just disable the no-leaked-event-listener rule, but it would be nice if it could detect this pattern with a heuristic, and maybe even alert you e.g. if you forget to pass signal or forget to call abort().

コントリビューターガイド