New
Introducing React Bench, see how different models perform on React code

react-doctor/effect-listener-cleanup-mismatch

Effect cleanup does not match its event listener

  • Category: Bugs
  • Severity: error
  • Source: oxlint-plugin-react-doctor
  • Framework: global
  • Enabled when: react
  • Default: Enabled

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the reported code matches Effect cleanup does not match its event listener. Check the framework context and diagnostic message before suppressing it.

Fix prompt

Use this once validation confirms the diagnostic is real.

Pass the same callback binding and capture flag to addEventListener and removeEventListener, or abort the registration's local AbortController during cleanup.

More Bugs rules from the rules reference:

  • react-doctor/effect-needs-cleanup: Return a cleanup function that releases the subscription / timer: `return () => target.removeEventListener(name, handler)` for listeners, `return () => clearInterval(id)` / `clearTimeout(id)` for timers, or `return unsubscribe` if the subscribe call already returned one
  • react-doctor/exhaustive-deps: Match the deps array to what the hook callback actually captures, or stabilize/move recreated values instead of blindly adding them.
  • react-doctor/expo-no-non-inlined-env: Use static dotted access: process.env.EXPO_PUBLIC_NAME (computed/destructured reads aren't inlined and are undefined at runtime)
  • react-doctor/hooks-no-nan-in-deps: Remove the literal NaN from the dependency array, or normalise it (Number.isNaN(x) ? 0 : x) before passing it in.
  • react-doctor/html-no-invalid-paragraph-child: Replace the wrapping <p> with a <div>, or hoist the block-level child out of the paragraph