Problem 4: Callback Hell

Too many callback/handler props

The Problem: Callback Hell

Too many handler props cluttering the component

Components with many callbacks become hard to manage:

<Form
  onSubmit={handleSubmit}
  onCancel={handleCancel}
  onChange={handleChange}
  onBlur={handleBlur}
  onFocus={handleFocus}
  onError={handleError}
  onSuccess={handleSuccess}
  onValidate={handleValidate}
  onReset={handleReset}
  onDelete={handleDelete}
/>

Issues:

Too many props to pass and manage
Hard to understand which callbacks are required
Difficult to test with many mocked callbacks
Easy to forget or misname callbacks
Poor developer experience