Problem 6: State vs Props Confusion

Props that should be internal state

The Problem: State vs Props Confusion

Exposing internal state as props

Forcing parents to manage component's internal state:

// Parent has to manage modal state
const [isOpen, setIsOpen] = useState(false)

<Modal 
  isOpen={isOpen}
  onOpen={() => setIsOpen(true)}
  onClose={() => setIsOpen(false)}
/>

// This is the component's internal concern!

Issues:

Parent components become cluttered
Component loses encapsulation
Difficult to reuse component
More boilerplate code
Breaks single responsibility principle