react-effects-audit_skill

Overview

This skill audits React components to find unnecessary or unsafe useEffect patterns and recommends concrete fixes. It detects nine common anti-patterns from the "You Might Not Need an Effect" guidance and tags each finding with severity, location, and a suggested remediation. The audit integrates project-type rules for Next.js and React to flag architecture-level concerns.

How this skill works

It scans source files (*.tsx, *.jsx, *.ts, *.js) to locate useEffect usages and applies grep-style detection rules to flag suspicious patterns. Each flagged site is read for context to confirm or dismiss false positives, then annotated with severity and an actionable fix suggestion. The output is a structured report that includes location, explanation, and recommended code changes without automatically applying fixes.

When to use it

• During code review to catch effect anti-patterns before merge.
• When optimizing component performance or reducing unnecessary renders.
• Before refactoring a codebase to modern React patterns (React 19+).
• Integrating into CI to enforce hook usage guidelines.
• Assessing third-party components for event/memory leak risks.

Best practices

• Always read flagged files to confirm context before accepting findings.
• Treat CRITICAL findings (race conditions, memory leaks) as immediate fixes.
• Prefer deriving state directly or using memoization instead of setState in effects.
• Use AbortController or proper cleanup for fetches and subscriptions.
• Cross-check project type rules (Next.js / React) to avoid architecture violations.

Example use cases

• Find effects that set derived state and replace them with derived values or useMemo.
• Detect fetch effects without cleanup and recommend AbortController-based fixes.
• Locate chained effects where multiple effects trigger each other and suggest consolidation.
• Identify manual store subscriptions and propose useSyncExternalStore or dedicated hooks.
• Audit a Next.js app and flag client-side data fetching that should be moved to server components.