Definition

a higher-order component (HOC) refers to a function that accepts a single React component and returns a new React component.

const EnhancedComponent = hoc(BaseComponent)

Use Cases

• Handle cross-cutting concerns (ex: logger)
• Reuse component logic

Example

• Create a HOC to upper case component's prop title
• Create a HOC to cut the title if it exceeds a number of character, ex: if limit is 10, 'The title exceed 10` -> 'The title ...'
• Combine 2 HOCs with compose() of recompose

export const makeUpperCase = (WrappedComponent) => {
  return (props) => {
    let title = props.title;
    const childProps = Object.assign({}, props, {
      title: title.toUpperCase()
    });

    return <WrappedComponent { ...childProps } />
  };
};

export const limitLetter = (limitLetter) => (WrappedComponent) => {
  return (props) => {
    let title = props.title;
    if (title.length > limitLetter) {
      title = title.substring(0, limitLetter) + '...';
    }
    const childProps = Object.assign({}, props, {
      title: title
    });

    return <WrappedComponent { ...childProps } />
  };
};

compose(makeUpperCase, limitLetter(10))(WordCard);