Learning Redux

Higher-order components

As React components are also just functions, we can create higher-order components to reuse component logic, similar to how we reused reducer logic with higher-order reducers.

The signature of a higher-order component looks as follows:

const EnhancedComponent = higherOrderComponent(WrappedComponent)

A component transforms properties into the UI, and a higher-order component transforms a component into another (enhanced) component; for example, we could define a higher-order component logProps, which logs property changes in the wrapped component:

function logProps (WrappedComponent) {

We return a new React class component:

  return class extends React.Component {

Using a class component, we can define a componentWillReceiveProps ...