Higher-Order Component: Convention: Maximizing Composability

// Instead of doing this...
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ... you can use a function composition utility
// compose(f, g, h) is the same as (...args) => f(g(h(...args)))
const enhance = compose(
  // These are both single-argument HOCs
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

Higher-Order Component: Convention: Maximizing Composability — Structure map

Clickable & Draggable!

Higher-Order Component: Convention: Maximizing Composability — Related pages: