Higher Order Components

Sebastian Siemssen (@thefubhy)

Formally replaced Mixins as a tool of abstraction

They are everywhere

• react-redux (connect)
• react-router (withRouter)
• react-intl (injectIntl)
• react-apollo (withApollo)
• recompose (various)
• ...

What?

They take a Component as an argument and return a modified or enhanced version of the same Component.

They are just Functions

Usually with Configuration

Why?

Separate logic from rendering

Reusability

Composition

Practical Examples

Logging props

Logging lifecycle

Logging lifecycle

Hoist state management

... and so much more

Data fetching

Filtering props

Mapping over props

Render optimizations

Lazy loading dependencies

Conditional render switches

Observing browser events

...