Problem 7: Prop Coupling

Props that must be used together

The Problem: Prop Coupling
Props that depend on each other

Some props only make sense when used together:

<DataTable
  sortBy="name"
  sortOrder="asc"
  filterBy="status"
  filterValue="active"
  pageSize={10}
  currentPage={1}
/>

// These props are tightly coupled
// If you change one, you might need to change others

Issues:

  • Unclear which props work together
  • Easy to create invalid combinations
  • Difficult to refactor
  • Poor developer experience
  • Hard to document dependencies