Review Refactor

Dimensions

Derivation Logic

When to Review

Review when:

• Feature is shipped and working
• You have dedicated time
• Planning next iteration
• Before major additions
• Tech debt is slowing you down

Don't review:

• Before shipping (blocks velocity)
• During building (distracts)
• Every commit (overkill)
• When you should be shipping

Quick Review (15 min)

Fast pass for critical issues only.

Checklist

## Quick Review: [Feature]

### Security
- [ ] No secrets in code
- [ ] Auth on protected routes
- [ ] Input validation present
- [ ] No SQL injection vectors

### Data
- [ ] No data loss scenarios
- [ ] Errors handled
- [ ] User feedback on failures

### Critical Bugs
- [ ] Core flow works
- [ ] No infinite loops
- [ ] No memory leaks

Pass? → Ship more features
Fail? → Fix critical only, then ship

Code Quality Review (30 min)

Deeper review for maintainability.

Type Safety

# Run type check
pnpm tsc --noEmit

Fix these:

// ❌ Bad
const data: any = response
function handle(x: any) {}
// @ts-ignore

// ✓ Good
const data: User = response
function handle(x: unknown) {
  if (isUser(x)) { ... }
}

Linting

# Run linter
pnpm lint

# Auto-fix
pnpm lint --fix

Pattern Consistency

Code Smells

Performance Review (30 min)

Bundle Analysis

# Next.js
npx @next/bundle-analyzer

# General
npx source-map-explorer dist/**/*.js

Fix these:

• Large dependencies (find alternatives)
• Unused imports
• Missing code splitting
• Unoptimized images

Runtime Performance

// Add performance marks
performance.mark("start")
// ... code
performance.mark("end")
performance.measure("operation", "start", "end")

Check:

• Initial load time < 3s
• Time to interactive < 5s
• No layout shifts
• Smooth animations (60fps)

Database Performance

// Check for N+1 queries
// Before (N+1):
const users = await db.user.findMany()
for (const user of users) {
  const posts = await db.post.findMany({ where: { userId: user.id } })
}

// After (single query):
const users = await db.user.findMany({
  include: { posts: true }
})

Refactor Workflow

Step 1: Identify Target

## Refactor Target
**What:** [component/module]
**Why:** [reason - slow, messy, hard to change]
**Risk:** [low/medium/high]

Step 2: Create Safety Net

Before refactoring:

# Checkpoint
git add -A && git commit -m "pre-refactor: [target]"
git tag pre-refactor-[target]

# If you have tests
pnpm test

Step 3: Refactor

Rules:

• One change at a time
• Verify after each change
• Commit frequently
• Keep working at all times

Step 4: Verify

# Type check
pnpm tsc --noEmit

# Lint
pnpm lint

# Test (if exists)
pnpm test

# Manual test
# Click through the feature

Step 5: Document Decision

## Refactor Complete: [target]
**Before:** [old approach]
**After:** [new approach]
**Why:** [benefit]

Common Refactors

Extract Component

// Before: Large component
function Page() {
  return (
    <div>
      {/* 50 lines of header */}
      {/* 100 lines of content */}
      {/* 30 lines of footer */}
    </div>
  )
}

// After: Extracted
function Page() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  )
}

Extract Hook

// Before: Logic in component
function Component() {
  const [data, setData] = useState()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState()
  
  useEffect(() => {
    setLoading(true)
    fetch(url).then(setData).catch(setError).finally(() => setLoading(false))
  }, [url])
  
  // ...
}

// After: Custom hook
function useData(url) {
  const [data, setData] = useState()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState()
  
  useEffect(() => { /* ... */ }, [url])
  
  return { data, loading, error }
}

function Component() {
  const { data, loading, error } = useData(url)
  // ...
}

Extract Utility

// Before: Repeated logic
function ComponentA() {
  const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount)
}

function ComponentB() {
  const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price)
}

// After: Utility
// lib/utils.ts
export function formatCurrency(amount: number) {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount)
}

Simplify Conditionals

// Before: Nested ifs
if (user) {
  if (user.isAdmin) {
    if (user.isActive) {
      // do thing
    }
  }
}

// After: Early returns
if (!user) return
if (!user.isAdmin) return
if (!user.isActive) return
// do thing

Review Schedule

Don't Over-Review

Signs of over-reviewing:

• Reviewing before shipping
• Multiple review rounds
• Reviewing small changes
• Perfectionism blocking progress

Remember: Code in production > perfect code in development