Problem 5: Spread Props Anti-pattern

Spreading unknown props without control

The Problem: Spread Props Anti-pattern
Spreading unknown props creates hidden dependencies

Spreading props without control makes it unclear what props are actually used:

function Button({ children, ...rest }: ButtonProps) {
  return <button {...rest}>{children}</button>
}

// What props does Button accept?
// What will be passed to the button element?
// No way to know without reading the code!

Issues:

  • Unclear component interface
  • Hidden dependencies and side effects
  • Difficult to document and maintain
  • Poor TypeScript support
  • Easy to pass unwanted props