FRONT011warningPro

useeffect-listener-no-cleanup

useEffect attaches an event listener without returning a cleanup that detaches it.

Applies to: JavaScript, TypeScript

Why this matters

The browser keeps a strong reference to every event handler registered with addEventListener. React unmount does not remove those handlers for you. Without a matching removeEventListener in the cleanup return, the handler — and every value it closed over — survives unmount and every re-render adds another one to the dispatch table. Long-lived pages (dashboards, admin panels, dev-mode tabs) then accumulate megabytes of retained component trees. Always return () => el.removeEventListener('event', handler) from the effect, with the *same* handler reference — a fresh arrow function will not match and will not detach.

Catch it before it ships

pip install stablestack # or: npx stablestackstablestack # scans your project, FRONT011 includedstablestack explain FRONT011

FRONT011 is part of the Pro rule set. See pricing — the free tier ships 24 checks with no signup.

False positive in your codebase? Suppress a single line with # noqa: FRONT011

More Frontend checks

tabs-url-routing

MUI Tabs should use URL routing via useSearchParams for bookmarkable/shareable tabs.

window-ssr-unsafe

Accessing window/document without SSR check causes server-side errors

inline-jsx-handler

Inline arrow functions in JSX cause unnecessary re-renders

nextjs-redirect-request-url

Redirect uses request.url as URL base, which is wrong behind a reverse proxy.

useeffect-side-effect-unguarded

useEffect contains a mutating HTTP call without a guard against double-firing.

stale-time-dependent-ui

Time-dependent filtering without a re-render timer will show stale data.

unbounded-ai-output

AI/LLM output rendered in JSX without truncation or overflow handling.

loading-returns-null

Returning null during loading causes layout shift and flash of empty content.