Problem 12: Custom Hooks Over Props

Extracting logic into custom hooks instead of prop drilling

Messy Approach: Logic in Props

Passing complex logic through callback props

❌ Messy:

interface FormProps {
  onValidate: (data: any) => boolean
  onSubmit: (data: any) => Promise<void>
  onError: (error: Error) => void
  onSuccess: () => void
  isLoading: boolean
  error: string | null
}

// Component receives all logic as props
function Form({ onValidate, onSubmit, onError, onSuccess, isLoading, error }: FormProps) {
  // Hard to understand what this component does
  // Logic is scattered across props
}

Issues

• Logic is scattered across multiple props

• Hard to understand component behavior

• Difficult to test component in isolation

• Props become a dumping ground for callbacks

• Reusing logic requires prop drilling