refactoring

# Refactoring (React/TypeScript)

Linter-driven refactoring patterns to reduce complexity and improve React code quality.

## When to Use
- ESLint fails with SonarJS complexity issues
- Code feels hard to read or maintain
- Components/functions are too long or deeply nested
- Automatically invoked by @linter-driven-development when linter fails

## Refactoring Signals

### SonarJS Linter Failures
- **sonarjs/cognitive-complexity** (max: 15) → Simplify logic, extract functions/hooks
- **sonarjs/cyclomatic-complexity** (max: 10) → Reduce branches, early returns
- **sonarjs/expression-complexity** (max: 5) → Extract variables, simplify conditions
- **sonarjs/max-lines-per-function** (max: 200) → Extract components/hooks
- **sonarjs/max-lines** (max: 600) → Split file into multiple files
- **sonarjs/nested-control-flow** (max: 4) → Early returns, guard clauses

### React-Specific Signals
- **react/no-unstable-nested-components** → Extract component definitions
- **react/no-multi-comp** → Split into separate files
- **react-hooks/exhaustive-deps** → Simplify dependencies, extract logic

### Code Smells
- Components > 200 LOC
- Functions with > 4 levels of nesting
- Mixed abstraction levels (UI + business logic)
- Inline complex logic in JSX
- Deeply nested conditionals

## Workflow

### 1. Interpret Linter Output

Run `npm run lintcheck` and analyze failures:
```
src/features/auth/LoginForm.tsx:45:1: Cognitive Complexity of 18 exceeds max of 15
src/features/users/UserList.tsx:120:5: Cyclomatic Complexity of 12 exceeds max of 10
src/components/DataTable.tsx:89:1: Function has 250 lines, max is 200
```

### 2. Diagnose Root Cause

For each failure, ask:
- **Mixed abstractions?** → Extract custom hooks, extract components
- **Complex conditionals?** → Early returns, guard clauses, extract conditions
- **Primitive obsession?** → Create Zod schemas or branded types
- **Long component?** → Split into smaller components
- **Nested components?** → Extract to separate components