learn-alternatives

Show Alternatives

Compare different approaches to solve the same problem.

Usage

/learn:alternatives              # Compare approaches for current code
/learn:alternatives auth         # Compare authentication methods
/learn:alternatives state        # Compare state management options
/learn:alternatives --detailed   # Include code examples for each

Instructions

1. Identify the problem being solved (from context or argument)
2. Present 3-5 alternative approaches
3. For each approach, explain:
   • What it is (one sentence)
   • When to use it
   • Trade-offs (pros/cons)
4. Provide a recommendation based on context
5. Optionally show code examples for top choices

Response Format

## Problem: [What we're trying to solve]

### Approach 1: [Name]

**What**: [One-sentence description]

**When to use**:
- [Scenario 1]
- [Scenario 2]

**Pros**: [List]
**Cons**: [List]

---

### Approach 2: [Name]
...

---

## Comparison Table

| Criteria | Approach 1 | Approach 2 | Approach 3 |
|----------|------------|------------|------------|
| Complexity | Low | Medium | High |
| Performance | ★★☆ | ★★★ | ★★☆ |
| Bundle size | Small | Medium | Large |
| Learning curve | Easy | Medium | Steep |

## Recommendation

**For your case**: [Recommended approach] because [reason based on context]

**Consider instead if**: [Alternative scenarios]

Comparison Criteria

Standard criteria to evaluate (adjust based on problem):

Depth Modes

Default

• 3-4 alternatives
• Brief description each
• Comparison table
• Recommendation

--detailed

• 4-5 alternatives
• Code example for each
• Detailed trade-offs
• Migration considerations
• Real-world case studies

--quick

• 2-3 alternatives
• One-line each
• Quick recommendation

Example Session

User: I'm using useState for form state. /learn:alternatives

Claude: ## Problem: Managing Form State in React

### Approach 1: Multiple useState

**What**: Separate useState for each field

**When to use**:
- Simple forms (< 5 fields)
- No complex validation
- No cross-field dependencies

**Pros**: Simple, no dependencies, easy to understand
**Cons**: Verbose with many fields, scattered state

---

### Approach 2: Single useState with Object

**What**: One useState holding all fields as object

**When to use**:
- Medium forms (5-10 fields)
- Need to reset entire form
- Want cleaner code

**Pros**: Grouped state, easy reset, cleaner
**Cons**: Need spread operator, can cause unnecessary re-renders

---

### Approach 3: useReducer

**What**: Reducer pattern for complex state transitions

**When to use**:
- Complex validation logic
- Multi-step forms
- Undo/redo functionality

**Pros**: Predictable updates, handles complex logic, testable
**Cons**: More boilerplate, learning curve

---

### Approach 4: Form Library (React Hook Form, Formik)

**What**: Dedicated form state management library

**When to use**:
- Large forms (10+ fields)
- Complex validation (async, cross-field)
- Performance critical (many fields)

**Pros**: Optimized re-renders, validation built-in, less code
**Cons**: Dependency, learning curve, bundle size

---

## Comparison Table

| Criteria | useState | useReducer | React Hook Form |
|----------|----------|------------|-----------------|
| Complexity | Low | Medium | Medium |
| Performance | ★★☆ | ★★☆ | ★★★ |
| Bundle size | 0kb | 0kb | ~8kb |
| Validation | Manual | Manual | Built-in |
| Best for | Simple | Complex logic | Large forms |

## Recommendation

**For your case**: If this is a simple login/contact form, stick with **useState**. If you're building a multi-step checkout or admin form, consider **React Hook Form** for the validation and performance benefits.

**Consider useReducer if**: You need undo/redo, complex state machines, or want reducer-style testing.

Common Alternative Comparisons

$ARGUMENTS