FRONT003infoPro

inline-jsx-handler

Inline arrow functions in JSX cause unnecessary re-renders

Applies to: JavaScript, TypeScript

Why this matters

When you write onClick={() => doSomething()}, a new function is created on every render. This breaks React.memo and PureComponent optimizations because the prop appears to change every time. For components rendered frequently or in lists, this can cause significant performance issues. Use useCallback or define handlers outside JSX.

Catch it before it ships

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

FRONT003 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: FRONT003

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

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.

eager-queries-no-defer

3+ query hooks all firing on mount with no deferred loading.