React Anti Patterns

React Anti-Patterns

Overview

Inject React anti-patterns and performance pitfalls into existing React apps while keeping them functional, so teams can practice identifying and fixing issues.

Parameters

Amount (how many modifications)

• low: 1-3 subtle changes, app fully functional
• medium (default): 5-8 changes, noticeable performance issues
• high: 10+ changes, can cause build failures (TypeScript/lint errors allowed)

Level (experience targeting)

• junior: Obvious issues - easy to spot during code review
• semi-senior: Moderate complexity - requires React knowledge
• senior: Subtle issues - requires profiling or deep knowledge
• mixed (default): Combination of all levels

Flags

• --comments: Add inline comments identifying the anti-pattern
• --comments-hint: Add comments with a hint on how to fix
• --comments-fix: Add comments with full fix explanation
• --specific <category>: Target specific category only (e.g., --specific rerender)

Categories

React: rerender, state, effect, list, conditional, data

Next.js: waterfall, bundle, boundary, actions, rsc

Workflow

1. Framework Detection

Check if project is Next.js:

• Look for next.config.js, next.config.mjs, or next.config.ts
• Check package.json for next dependency

If Next.js detected, ask user:

"This is a Next.js project. Include Next.js-specific anti-patterns in addition to React patterns?"

2. Gather Parameters

If not specified in invocation, ask user:

Amount (default: medium): "How many anti-patterns should I introduce?"

• low: 1-3 subtle changes
• medium: 5-8 noticeable changes
• high: 10+ changes, may break build

Level (default: mixed): "What experience level should patterns target?"

• junior: obvious issues, easy to spot
• semi-senior: moderate complexity, requires React knowledge
• senior: subtle issues, requires profiling
• mixed: combination of all levels

Comments (default: none): "Should I add comments explaining the anti-patterns?"

• none: no comments added
• --comments: identify only
• --comments-hint: with hints
• --comments-fix: with full fixes

3. Load Patterns

Based on selections, load relevant reference files:

references/anti-patterns-index.md     # Always load for pattern selection
references/react/junior.md            # If level includes junior
references/react/semi-senior.md       # If level includes semi-senior
references/react/senior.md            # If level includes senior
references/nextjs/junior.md           # If Next.js + level includes junior
references/nextjs/semi-senior.md      # If Next.js + level includes semi-senior
references/nextjs/senior.md           # If Next.js + level includes senior

4. Select Patterns

Using the index, select patterns based on:

• Amount determines count
• Level determines which files to pull from
• --specific filters by category
• Prioritize variety across categories unless --specific is set

Selection by amount:

• low: 1-3 patterns from selected level(s)
• medium: 5-8 patterns, spread across selected level(s)
• high: 10+ patterns, include build-error patterns if available

When level=mixed: distribute patterns roughly evenly across junior/semi-senior/senior. When specific level selected: all patterns from that level only.

5. Apply Changes

For each selected pattern:

1. Find suitable injection point in codebase
2. Apply the "After" transformation from the pattern definition
3. Add appropriate comment based on flag:
   • --comments: // ANTI-PATTERN: pattern-id
   • --comments-hint: Add the hint comment from pattern
   • --comments-fix: Add the fix comment from pattern
4. Verify the change doesn't break the app (unless high amount with build-error pattern)

6. Report

After all changes, provide summary:

## Anti-Patterns Applied

### Files Modified
- path/to/Component.tsx: 3 patterns
- path/to/hooks/useData.ts: 2 patterns

### Patterns Introduced
| Pattern | Level | Category | File |
|---------|-------|----------|------|
| list-keys-index | junior | list | Component.tsx:45 |
| usememo-inline-defeat | semi-senior | rerender | Component.tsx:23 |
...

### Next Steps
Run the app and use React DevTools Profiler to identify the performance issues,
or review the code to spot the anti-patterns.

Example Invocations

# Defaults (medium, mixed levels, no comments)
/react-anti-patterns

# Few junior patterns with hints
/react-anti-patterns --comments-hint low junior

# Many senior patterns with full explanations
/react-anti-patterns --comments-fix high senior

# Only waterfall patterns (Next.js)
/react-anti-patterns --specific waterfall

# Medium amount, semi-senior level, identify comments
/react-anti-patterns --comments medium semi-senior

Resources

• Anti-pattern catalog: references/anti-patterns-index.md
• React patterns: references/react/
• Next.js patterns: references/nextjs/